本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件。
一. 加载方式
表单组件只能在 JS 区域设置,首先定义一张表单。
<form id="box" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name"
data-options="required:true" />
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email"
data-options="validType:'email'" />
</div>
<input type="submit">
</form>
//JS 加载调用
$('#box').form({
url : 'content.php',
onSubmit: function(){
},
success:function(data){
alert(data);
}
});
//提交额外数据
onSubmit: function(param){

param.code = '320902';
},
//解析 JSON 数据
{
"name" : "bnbbs",
"email" : "bnbbs@163.com"
}
success:function(data){
var data = eval('(' + data + ')');
if (data.email) {
alert(data.email);
}
}

//自动提交
$('#box').form('submit',{
url : 'content.php',
});

二.属性列表

  

//属性设置
$('#box').form({
url : 'content.php',
});

三. 事件列表

//事件列表
$('#box').form({
onBeforeLoad : function () {
alert('load 之前执行');
},
onLoadSuccess : function (data) {
alert('load 成功后执行:' + data.name);
},
onLoadError : function () {
alert('load 错误时执行');
},
});

四. 方法 列表

//自动提交
$('#box').form('submit', {
...
});

//使用 load 填充
$('#box').form('load', {
name : 'bnbbs',
email : 'bnbbs@163.com',
});

//使用 load 通过 URL 填充,对方是 JSON 格式
$('#box').form('load', 'content.php');

//验证后再执行提交

$('#box').form({
url : 'content.php',
onSubmit : function (param) {
return $(this).form('validate');
},
success : function (data) {
alert(data);
},
});
//清理和重置
$('#box').form('clear');
$('#box').form('reset');
//禁用和启用验证
$('#box').form('disableValidation');
$('#box').form('enableValidation');
使用$.fn.form.defaults 重写默认值对象。

Form( 表单) 组件的更多相关文章

  1. 第二百二十一节,jQuery EasyUI,Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  2. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  3. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  4. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  5. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  6. Django Form表单组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  7. Django之form表单组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  8. form表单组件

    1.sweetalert 组件地址 form组件 form表单完成的事情,:   提供input可以提交数据, 对提交的数据进行校验,提供错误提示 定义form组件 from django impor ...

  9. vue3 element-plus 配置json快速生成form表单组件,提升生产力近600%(已在公司使用,持续优化中)

    ️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...

随机推荐

  1. MYSQL Model报错:指定的存储区提供程序在配置中找不到 的解决

    开了项目发现没装mysql及mysql connector/.net.下了个最新版本,结果打开vs,进入模型edmx页面就出了这个问题. 刚开始以为是ProviderManifestToken版本的问 ...

  2. QT5在VS2013中找不到QtNetwork或QTcpSocket或QTcpSocket等头文件

    一.首先是要有相关的库文件 方法一:手动添加库文件Qt5Networkd.lib 对项目进行右键,找到相关的属性,然后查看Linker中input部分的红色选项中是否含有Qt5Networkd.lib ...

  3. 如何往IE工具条添加按钮(转载)

    如何往IE工具条添加按钮 问题提出:金山词霸.网络蚂蚁等软件安装后会向IE的工具条添加自己的按钮.按下按钮后还会作出相应的动作,这种功能是如何实现的呢?读完本文,您也可以将自己应用程序的按钮添加到IE ...

  4. 企业管理系统开发笔记(4)---后台登录_MVC过滤器

    在asp.net时代,我们通常需要在后台的每个页面进行判断用户是否登录的状态,不管是通过session还是通过windows身份验证还是表单验证方式等等方法来对用户登录进行判断跳转.但是在mvc时代, ...

  5. smarty 练习: 分页查询

    对查出的数据进行分页,并添加查询 在main.php和main.html两个页面操作: 后台:main.php <?php include("../init.inc.php" ...

  6. C++ AO读取shapefile的属性值

    C++ AO读取一个shapefile文件的所有属性值   #include "stdafx.h"   #include "iostream.h"   #inc ...

  7. BufferedOutputStream

    package file; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStr ...

  8. HTML5最佳实践

    首先先给大家推荐个不错的 前端 网站:http://www.tystudio.net HTML5正迅速称为web前端开发技术标准,作为一名前段开发人员,了解并正确的使用HTML5制作网站变得越来越重要 ...

  9. JS--图片轮播效果

    搞了很长时间才弄清楚图片轮播效果的原理,理解各个事件发生的原因,浪费了这么长的时间,只怪自己的知识太过于薄弱.现将代码写下,供大家参看,如有不妥之处还望指出,大家一起学习. 功能: 1.点击左右两边的 ...

  10. 个人vim配置(.vimrc文件分享)

    syntax enable syntax on colorscheme desert set nu! set nowrap set nobackup set backspace= set tabsto ...