Form( 表单) 组件

本节课重点了解 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 重写默认值对象。