转自:https://www.cnblogs.com/net5x/articles/4576926.html
Form(表单)
使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
用法
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
Name:
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)
}
}
});
属性
属性名属性值类型描述默认值
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版开始可用)