如何在异步提交form的时候利用jQuery validate实现表单验证

相信很多人都用过jquery validate插件，非常好用，并且可以通过下面的语句来自定义验证规则

//电话号码验证

jQuery.validator.addMethod("isPhone", function(value, element){

var tel =/^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;

returnthis.optional(element) ||(tel.test(value));

},"请正确填写您的电话号码");

验证通过，表单提交。但我们常常会碰到这样的需求，当验证通过后，我不需要通过submitform的方式提交表单，我想要更灵活的通过ajax处理表单，加入很多动态的效果，提高客户体验，请看下面的例子：

有一个表单：

<form id="formId" action="">

姓名：<input type="text"name="name">

电话：<input type="text"name="phone">

<input type="button" value="submit"onclick="doSubmit();">

</form>

以下是JS：

function doSubmit() {

validateForm();//调用验证方法

//do something else...

}

function validateForm() {

varvalidator = $("#formId").validate({

errorElement: "em",

success:function(em) {

em.text("ok").addClass("success");//验证通过的动态CSS

},

submitHandler:function(){

ajaxSubmitForm();

},//这是关键的语句，配置这个参数后表单不会自动提交，验证通过之后会去调用的方法

rules:{

name:{

required:true,

maxlength:100

},

phone:{

isPhone:true

}

},

messages:{

name:{

required:"请填写姓名",

maxlength:"姓名不超过100个字符"

}

}

});

}

function ajaxSubmitForm() {

var para =;//组织参数

var url ="/jajax/saveForm.do";

$.ajax({

type:"post",

cache:false,

dataType:"json",

url:url,

data:para,

beforeSend:function(XMLHttpRequest){

//dosomething before submit...

},

success:function(data, textStatus){

//dosomething after submited...

},

complete:function(XMLHttpRequest, textStatus){

//dosomething in the end...

}

});

}

这样就非常灵活的完成了表单的验证和提交，其中很多时间节点都由我们自由的控制，加入任意你想做的事，是不是很方便呢...

转载自： http://blog.sina.com.cn/s/blog_64852bef0100vkaf.html