下载地址: http://malsup.github.com/jquery.form.js
表单插件API
英文原文:http://www.malsup.com/jquery/form/#api
表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。
ajaxSubmit()选项设置
ajaxSubmit()提供了丰富的选项设置,我们根据使用的可能性大小进行列表,以供参考。
属性 | 描述 |
url | Ajax请求将要提交到该url,默认是表单的action属性值 |
type | 指定提交表单数据的方法(method):“GET”或“POST”。默认值:表单的method属性值(如果没有找到默认为“GET”)。 |
dataType | 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持: 'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。 'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。。 'script':如果dataType == 'script', 服务器响应将求值成纯文本。。 默认值:null(服务器返回responseText值) |
target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。 默认值:null。 |
beforeSubmit | 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。 默认值:null |
success | 表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值:null |
clearForm | 表示如果表单提交成功是否清除表单数据。默认值:null |
resetForm | 表示如果表单提交成功是否进行重置。默认值: null |
增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用 ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options 对象。
1. $.formValidator。initCOnfig初始化验证表单
$.formValidator.initConfig({formid:"loginform",submitOnce:true,onerror:function(msgs){
msg({
'title':'系统提示',
'contents':msgs
});
},onsuccess:function(){
if(!submiting){
$("#merchant_name").val($.trim("#merchant_name").val());
$("#password").val($.trim("#password").val());
alert($.trim("#merchant_name").val());
submiting=true;
$('#loginform').ajaxSubmit({dataType:'json',url:'${pageContext.request.contextPath}/views/marchant/dologin.do',success: function(resp) {
submiting=false;
if(resp.success){
location.href='${pageContext.request.contextPath}/publicinfo/mypublic.do';
}else{
msg({
'title':'系统提示',
'contents':resp.msg
});
}
return false;
}});
}
return false;
}});
$("#merchant_name").formValidator({onshow:"用户名由4-20位的数字和字母组成。",onfocus:"用户名由4-20位的数字和字母组成。",oncorrect:"输入正确"}).regexValidator({regexp : "^[\\w]{4,20}$",datatype:"string",onerror:"用户名格式错误,请确认"});
$("#password").formValidator({onshow:"请填写密码",onfocus:"6-20个英文,数字或下划线字符组成。"}).regexValidator({regexp : "^(\\w){6,20}$",onerror:"密码格式错误,请确认。"});
});
2.如果想要取消对某个form表单中的某一项的验证可以使用如下方法如果param为true表示不进行验证,为false表示验证,select为选择器
$(select).unFormValidator(param).defaultPassed();
3.比如手机号码验证
$("#linkPhone").formValidator({
onshow: "(必填)",
onfocus: "(必填)",
oncorrect: "输入正确"
}).regexValidator({
regexp: "^(\\d{3,4}-?\\d{7,8}|(13|15|18)\\d{9})$",
onerror: "(错误)电话号码格式不正确,请检查"
});
ajaxSubmit()选项设置中的分组验证功能
msg({
'title':'系统提示',
'contents':msgs
});
}
ajaxSubmit()中的弹窗常用的设置
'title':'系统提示',
'contents':result.msg,
'results':function(result1){
if(result.success){
location.href="${pageContext.request.contextPath}/bugComment/list.do";;
}
}
});
'title':'系统提示',
'contents':result.msg,
'results':function(result1){
if(result.success){
location.href="${pageContext.request.contextPath}/bugComment/list.do";;
}
}
});