jquery中ajaxfrom插件的使用方法介绍

下载地址： 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()选项设置中的分组验证功能

$.formValidator.initConfig({validatorgroup:"2",formid:"bugForm",submitOnce:true,onerror:function(msgs){
msg({
'title':'系统提示',
'contents':msgs
});
}

上面设置只针对标签属性为bugForm的from标签下的组validatorgroup为2 的进行验证。它下面的表单标签验证中都需要带上组

比如

$("#bug_answer").formValidator({validatorgroup:"2",onshow:"问题不能为空且必须在4-30个字符之间",onfocus:"问题不能为空且必须在4-30个字符之间",oncorrect:"输入正确"}).inputValidator({type:"size",min:4,max:30,onerror:"问题不能为空且必须在4-50个字符之间"});

ajaxSubmit()中的弹窗常用的设置

1.

msg({
'title':'系统提示',
'contents':result.msg,
'results':function(result1){
if(result.success){
location.href="${pageContext.request.contextPath}/bugComment/list.do";;
}
}
});

msg里面的参数属性可以自己配的比如

msg({
'title':'系统提示',

'confirms':true, //自己添加的属性
'contents':result.msg,
'results':function(result1){
if(result.success){
location.href="${pageContext.request.contextPath}/bugComment/list.do";;
}
}
});