zoukankan      html  css  js  c++  java
  • 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. });  
  • 相关阅读:
    波段是金牢记六大诀窍
    zk kafka mariadb scala flink integration
    Oracle 体系结构详解
    图解 Database Buffer Cache 内部原理(二)
    SQL Server 字符集介绍及修改方法演示
    SQL Server 2012 备份与还原详解
    SQL Server 2012 查询数据库中所有表的名称和行数
    SQL Server 2012 查询数据库中表格主键信息
    SQL Server 2012 查询数据库中所有表的索引信息
    图解 Database Buffer Cache 内部原理(一)
  • 原文地址:https://www.cnblogs.com/a757956132/p/3982014.html
Copyright © 2011-2022 走看看