jQuery EasyUI 表单插件 - Form 表单
jQuery EasyUI 插件
通过 $.fn.form.defaults 重写默认的 defaults。
表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交、加载、清除,等等。当提交表单时,调用 'validate' 方法来检查表单是否有效。
用法
创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。
Name:
Email:
...
让表单(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:'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 起可用。
jQuery EasyUI 插件