EasyUI-Form（表单）
使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
用法
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
-
id=“ff” method=“post”>
-
-
for=“name”>Name:
-
class=“easyui-validatebox” type=“text” name=“name” data-options=“required:true” />
-
-
-
for=“email”>Email:
-
class=“easyui-validatebox” type=“text” name=“email” data-options=“validType:'email'” />
-
-
…
-
使普通表单成为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)
-
}
-
}
-
});
属性
|
属性名 |
属性值类型 |
描述 |
默认值 |
|
novalidate |
boolean |
定义是否验证表单的字段，true:验证,false:不验证。（该属性自1.4版开始可用） |
false |
|
ajax |
boolean |
定义是否使用ajax提交表单，true:使用,false:不使用。（该属性自1.4版开始可用） |
true |
|
queryParams |
object |
当表单被提交到服务器的时候增加的额外参数列表。（该属性自1.4版开始可用） |
{} |
|
url |
string |
提交表单动作的URL地址 |
null |
事件
|
事件名 |
参数 |
描述 |
|
onSubmit |
param |
在提交之前触发，返回false可以终止提交。 |
|
success |
data |
在表单提交成功以后触发。 |
|
onBeforeLoad |
param |
在请求加载数据之前触发。返回false可以停止该动作。 |
|
onLoadSuccess |
data |
在表单数据加载完成后触发。 |
|
onLoadError |
none |
在表单数据加载出现错误的时候触发。 |
方法
|
方法名 |
参数 |
描述 |
|
submit |
options |
执行提交操作，该选项的参数是一个对象，它包含以下属性： 下面的例子演示了如何提交一个有效并且避免重复提交的表单。 $.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版开始可用） |
声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明：转自《EasyUI-Form（表单）》
本文地址：https://www.zhiletu.com/archives-2445.html
关注公众号：
微信赞赏
支付宝赞赏
鲁公网安备 37011302000311号