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

利用jquery validate插件，实现这样的需求：当验证通过后，我不需要通过submit form的方式提交表单，我想要更灵活的通过ajax处理表单，加入很多动态的效果，提高客户体验

页面里引入JS文件:

<script type="text/javascript" src="common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="common/js/jquery.validate.js" ></script>

<form id="formId" action="">
    手机号码：<inputtype="text" id="cellPhone" name="cellPhone">
    验证码：<inputtype="text" id="vaticationCode"  name="vaticationCode" >
         <input type="submit"id="submitBtn">
  </form>

 

//点击提交表单

    $("#submitBtn").click(function() {

        // 进行验证提交

        $("#firstForm").validate({

            submitHandler:function() {    //验证通过之后才去调用

                  ajaxSubmitForm();           

},

            rules:{

            cellPhone:

            {

                 isNonDefaultVal:true,

                 isPhone:true,

                 remote:{  //验证手机号是否存在

                     type: "GET",

                     url: _contextEbtPath + '/password/validateCellPhone',          

data:{

cellPhone:function(){return $("#cellPhone").val();}

                     }

                 }

            },

           vaticationCode:{

               required:true,

               remote:{  //验证短信验证码

                     type: "GET",

                     url: _contextEbtPath + '/password/validateSmsCode',          

                     data:

                     {

                      smsCode:function(){return $("#vaticationCode").val();},

                      cellPhone:function(){return $("#cellPhone").val();}

                     }

                 }

           }

       },

       messages:{

               cellPhone:{

                isNonDefaultVal:'请填写手机号',

                isPhone:"请正确填写您的电话号码",

                remote:"手机号不存在"

               },

               vaticationCode:{

                   required:"请填写验证码",

                   remote:"验证码错误"

               }

       }

        });

   

});

 

 

// 异步form提交方法

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...
            }
        });
    }