Validator验证Ajax提交表单的方法

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

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

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

Js代码  

1. $("#submitButton").click(function(){  
2. //序列化表单  
3.    var param = $("#leaveSave").serialize();  
4.    $.ajax({  
5.       url : "leaveSave.action",  
6.       type : "post",  
7.       dataType : "json",  
8.       data: param,  
9.       success : function(result) {  
10. if(result=='success') {  
11. location.href='allRequisitionList.action';  
12. } else if(result.startWith("error_")){  
13. $("#errorMessage").html(result.substring(6));  
14. } else {  
15. //返回的结果转换成JSON数据  
16. var jsonObj = eval('('+result+')');  
17. startTime = $("#startdate").val();  
18. endTime = $("#enddate").val();  
19. hour = jsonObj.hour;  
20. reason = jsonObj.reason;  
21.   
22. replaceDom(startTime,endTime,hour,reason);  
23. }  
24. }  
25. });  
26. });   

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

Js代码  

1. $("#saveWorkExtra").validate({  
2. onsubmit:true,// 是否在提交是验证  
3. onfocusout:false,// 是否在获取焦点时验证  
4. onkeyup :false,// 是否在敲击键盘时验证  
5.   
6. rules: {  
7. ....  
8. },  
9. messages:{  
10. ....  
11. },  
12. submitHandler: function(form) {  //通过之后回调  
13.      var param = $("#saveToWorkExtra").serialize();  
14.      $.ajax({  
15. url : "workExtraChange.action",  
16. type : "post",  
17. dataType : "json",  
18. data: param,  
19. success : function(result) {  
20. if(result=='success') {  
21.           location.href='allRequisitionList.action';  
22. } else {  
23.           var jsonObj = eval('('+result+')');  
24. }  
25. }  
26.      });  
27.          },  
28.          invalidHandler: function(form, validator) {  //不通过回调  
29.        return false;  
30.           }  
31. });