EasyUI Form表单提交
2016-12-05 16:07
411 查看
Form(表单)
使用$.fn.form.defaults重写默认值对象form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
用法
创建一个简单的HTML表单。构建一个包含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提交方式的表单。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
做一个提交操作。
// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
提交额外的参数。
$('#ff').form('submit', {
url:...,
onSubmit: function(param){
param.p1 = 'value1';
param.p2 = 'value2';
}
});
处理提交响应
提交一个ajax表单是非常简单的。用户可以在提交完成后获取响应数据。注意,响应的数据是来自服务器的原始数据。A parse action to the response data is required to get the correct data.
例如,响应数据假设为JSON,一个典型的响应数据格式如下:
{
"success": true,
"message": "Message sent successfully."
}
现在在'success'回调函数中处理JSON字符串。
$('#ff').form('submit', {
success: function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message)
}
}
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
url | string | 提交表单动作的URL地址 | null |
事件
事件名 | 参数 | 描述 |
---|---|---|
onSubmit | param | 在提交之前触发,返回false可以终止提交。 |
success | data | 在表单提交成功以后触发。 |
onBeforeLoad | param | 在请求加载数据之前触发。返回false可以停止该动作。 |
onLoadSuccess | data | 在表单数据加载完成后触发。 |
onLoadError | none | 在表单数据加载出现错误的时候触发。 |
方法
方法名 | 参数 | 描述 |
---|---|---|
submit | options | 执行提交操作,该选项的参数是一个对象,它包含以下属性: url:请求的URL地址。 onSubmit: 提交之前的回调函数。 success: 提交成功后的回调函数。 下面的例子演示了如何提交一个有效并且避免重复提交的表单。 $.messager.progress(); // 显示进度条 $('#ff').form('submit', { url: ..., onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); // 如果表单是无效的则隐藏进度条 } return isValid; // 返回false终止表单提交 }, success: function(){ $.messager.progress('close'); // 如果提交成功则隐藏进度条 } }); |
load | data | 读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型,如果是字符串则作为远程URL,否则作为本地记录。 代码示例: $('#ff').form('load','get_data.php'); // 读取表单的URL $('#ff').form('load',{ name:'name2', email:'mymail@gmail.com', subject:'subject2', message:'message2', language:5 }); |
clear | none | 清除表单数据。 |
reset | none | 重置表单数据。(该方法自1.3.2版开始可用) |
validate | none | 做表单字段验证,当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。 |
enableValidation | none | 启用验证。(该方法自1.3.4版开始可用) |
disableValidation | none | 禁用验证。(该方法自1.3.4版开始可用) |
相关文章推荐
- form表单,easyUi,jquery提交后,SpringMvc后台返回时,IE浏览器提示下载文件
- easyui的form表单提交和xheditor配合使用时出现value为空或旧值的解决办法
- easyui之form表单提交
- jquery插件EasyUI中form表单提交实例分享
- easyui-form表单提交combobox
- 表单 - Form - EasyUI提供的表单异步提交
- easyui表单提交验证form
- Easyui1.4使用FORM表单无法sumbit提交(待解决)
- jQuery-easyUI的使用:form表单组件及form的三种提交方式
- Easyui Form表单提交
- ASP MVC异步提交form表单,Jquery-easyui对话框,表单验证(jquery.validate)
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- easyui--验证表单提交后才开始验证的方法--form
- 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象
- easyUI添加下拉列表 +++ form表单点一次,向后台提交两次
- easyUI-form表单提交,正确返回但是不执行success
- 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象
- EasyUI中实现form表单提交的示例分享
- EasyUI的Form表单异步提交问题-ThinkPHP5对EasyUI异步表单不返回json
- jquery插件EasyUI中form表单提交实例分享