jQuery EasyUI 表單插件– Form 表單
jQuery EasyUI插件 通過$.fn.form.defaults 重寫默認的defaults。
表單（form）提供多種方法來執行帶有表單字段的動作，比如ajax 提交、加載、清除，等等。 當提交表單時，調用'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>
讓表單（form）成為ajax 提交的表單（form）
$('#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 表單（form）是非常簡單的。 當提交完成時用戶可以獲得響應數據。 請注意，響應數據是來自服務器的原始數據。 對響應數據的解析動作要求獲得正確的數據。
例如，響應數據假設是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 | 做提交动作，options 参数是一个对象，它包含下列属性： url：动作的 URL onSubmit：提交之前的回调函数 success：提交成功之后的回调函数 下面的实例演示如何提交一个有效表单，避免重复提交表单。
$.messager.progress(); // display the progress bar
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function(){
$.messager.progress('close'); // hide progress bar while submit successfully
}
});
|
| load | data | 加载记录来填充表单。data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。 代码实例：
$('#ff').form('load','get_data.php'); // load from URL
$('#ff').form('load',{
name:'name2',
email:'[email protected]',
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 起可用。 |
jQuery EasyUI插件