如何在异步提交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"οnclick="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