@author YHC
覆盖默认值 $.fn.form.defaults.
form提供不同的方法执行操作表单字段例如ajax submit,loader,clear,等等..当提交表单的时候,'validate'将调用验证表单是否合法.
使用
创建简单的HTML form,构造这个通常会使用id,action和method的值;
<form id="ff" 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>
...
</form>
使表单成为ajax提交的form
$('#ff').form({
url:...,
onSubmit: function(){
// 做一些验证
// 返回false 将阻止提交;
},
success:function(data){
alert(data)
}
});
// 提交表单
$('#ff').submit();
执行提交动作
// 执行form插件的 'submit'方法来提交form
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// 做一些验证..
// return false ;返回false将阻止提交动作 ;
},
success:function(data){
alert(data)
}
});
处理 submit 响应
提交一个ajax的form非常简单,当提交结束后用户可以得到响应数据,注意这个响应数据是来自服务器端的原始数据,响应数据的一个解析动作是需要得到的是正确的数据.
例如:响应数据假设为json,一个标准的响应数据例如下面这个:
{
"success": true,
"message": "Message sent successfully."
}
现在处理json字符串在'success'回调函数中:
$('#ff').form('submit', {
success: function(data){
var data = eval('(' + data + ')'); // 改变json对象为javascript对象
if (data.success){
alert(data.message)
}
}
});
属性
Name | Type | Description | Default |
---|---|---|---|
url | string | form的action的URL提交地址 | null |
事件
Name | Parameters | Description |
---|---|---|
onSubmit | none | form提交之前触发,该方法返回false将阻止submit动作. |
success | data | 当form提交成功之后触发. |
onBeforeLoad | param | 在请求加载数据之前触发.该方法返回false将取消这个动作. |
onLoadSuccess | data | 当form数据成功加载之后触发. |
onLoadError | none | 当在加载数据的时候出现一些异常的时候触发. |
方法
Name | Parameter | Description |
---|---|---|
submit | options | 执行submit动作, 这个 options参数是一个对象包含一下属性: url: 这个提交动作的URL地址 onSubmit: 在提交之前的回调函数 success: 提交成功之后的回调函数 下面的示例展示如何提交一个合法form和避免重复提交form
$.messager.progress(); // 显示一个进度条 $('#ff').form('submit', { url: ..., onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); // 当form不合法的时候隐藏工具条 } return isValid; // 返回false将停止form提交 }, success: function(){ $.messager.progress('close'); // 当成功提交之后隐藏进度条 } }); |
load | data | 加载记录填充form. 这个 data 参数可以是一个string或者是一个object类型, 当是string类型的时候将请求远程服务器端数据,其他(例如:object类型)行为定义为加载本地记录. 示例代码: $('#ff').form('load','get_data.php'); // 从URL加载 $('#ff').form('load',{//加载本地记录 name:'name2', email:'mymail@gmail.com', subject:'subject2', message:'message2', language:5 }); |
clear | none | 清空form数据 |
validate | none | 做form字段验证,返回true表示所有字段合法,这个方法使用了validatebox插件plugin. |