Validator验证Ajax提交表单的方法

转自： http://hunanpengdake.iteye.com/blog/1671360

当我们在一些稍微复杂的业务时，可能会遇到需要多个表单form在同一个页面的情况，但是提交一个表单以后不想页面刷新或者跳转，那么我们考虑到的就是Ajax提交表单，那么如何让Jquery的validator插件也可以对异步提交的表单进行验证呢？我们继续往下看。

在这里，我就用网络上的一个例子来说明好了。

下面是一个比较常见的jquery .ajax提交表单的写法

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


        
        
          //
        
        
          序列化表单
        
        
          var
        
         param = $("#leaveSave"
        
          ).serialize();

   $.ajax({

      url : 
        
        "leaveSave.action"
        
          ,

      type : 
        
        "post"
        
          ,

      dataType : 
        
        "json"
        
          ,

      data: param,

      success : 
        
        
          function
        
        
          (result) {


        
        
          if
        
        (result=='success'
        
          ) {

location.href
        
        ='allRequisitionList.action'
        
          ;

} 
        
        
          else
        
        
          if
        
        (result.startWith("error_"
        
          )){

$(
        
        "#errorMessage").html(result.substring(6
        
          ));

} 
        
        
          else
        
        
           {


        
        
          //
        
        
          返回的结果转换成JSON数据
        
        
          var
        
         jsonObj = eval('('+result+')'
        
          );

startTime 
        
        = $("#startdate"
        
          ).val();

endTime 
        
        = $("#enddate"
        
          ).val();

hour 
        
        =
        
           jsonObj.hour;

reason 
        
        =
        
           jsonObj.reason;



replaceDom(startTime,endTime,hour,reason);

}

}

});

});

如果想用ajax提交表单，还想用jquery的validate进行验证,那么可以这样解决：表单还是正常编写的表单内容，type还是submit类型，只不过在validate验证通过后的方法中使用ajax提交表单

              $("#saveWorkExtra"
              
                ).validate({

onsubmit:
              
              
                true
              
              ,
              
                //
              
              
                 是否在提交是验证
              
              

onfocusout:
              
                false
              
              ,
              
                //
              
              
                 是否在获取焦点时验证
              
              

onkeyup :
              
                false
              
              ,
              
                //
              
              
                 是否在敲击键盘时验证
              
              
                

rules: {

....

},

messages:{

....

},

submitHandler: 
              
              
                function
              
              (form) {  
              
                //
              
              
                通过之后回调
              
              
                var
              
               param = $("#saveToWorkExtra"
              
                ).serialize();

     $.ajax({

url : 
              
              "workExtraChange.action"
              
                ,

type : 
              
              "post"
              
                ,

dataType : 
              
              "json"
              
                ,

data: param,

success : 
              
              
                function
              
              
                (result) {


              
              
                if
              
              (result=='success'
              
                ) {

          location.href
              
              ='allRequisitionList.action'
              
                ;

} 
              
              
                else
              
              
                 {

          
              
              
                var
              
               jsonObj = eval('('+result+')'
              
                );

}

}

     });

         },

         invalidHandler: 
              
              
                function
              
              (form, validator) {  
              
                //
              
              
                不通过回调
              
              
                return
              
              
                false
              
              
                ;

          }

});

Validator验证Ajax提交表单的方法

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义