异步提交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...

            }

        });

    }