jquery.validate.min.js同一表单，多个提交按钮，多个验证规则

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

jQuery.validate

打开边栏(ESC) 关闭边栏(ESC)

相似问题：jquery.validate.min.js同一页面验证多个表单

jquery.validate.min.js同一表单，多个提交按钮，多个验证规则

点击不同的按钮，验证不同的字段，提交到不同的后台处理程序

方法一：

所以按钮都是type="submit"

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <form role="form" id="quickForm">
    <table class="table table-sm table-borderless projects zht_projects_view">
      <tbody>
        <tr id="shopAddressBox">
          <td class="text-end text_gray">
            <span class="text-danger">*</span>邮箱
          </td>
          <td class="form-group">
            <input type="text" id="txtCustEmail" name="txtCustEmail" class="ipt form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>
        <tr id="shopNameBox">
          <td class="text-end text_gray">
            <span class="text-danger">*</span>金额
          </td>
          <td class="form-group">
            <input type="text" id="txtCustAmount" name="txtCustAmount" class="ipt form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>        
        <tr>
          <th></th>
          <td>
            <button id="btnQuery" type="submit" class="btn btn-sm btn-danger">验证邮箱</button>
            <button id="btnSubmit" type="submit" class="btn btn-sm btn-danger">验证金额</button>
          </td>
        </tr>
      </tbody>
    </table>
    </form>
  <script src="jquery/jquery.min.js"></script> 
  <script src="jquery-validation/jquery.validate.min.js"></script>
  <script src="jquery-validation/additional-methods.min.js"></script>
  <script>
    $(document).ready(function () {
        var _customer_query = {
          submitHandler:function(form){
            console.log('邮箱验证通过');
            // 验证通过后，ajax提交数据
            // $.post(ZHT.U('shop/orderService/' + url),params,function(data,textStatus){
            // });
          },
          rules: {
            txtCustEmail: {
              required: true,
              email: true
            }
          },//endrule
          messages: {
            txtCustEmail: {
              required: "账号不能为空",
              email: "请录入正确格式的Email地址"
            }
          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
          }
        };

        var _customer_submit = {
          submitHandler:function(form){
            console.log('金额验证通过');
            // 验证通过后，ajax提交数据
            // $.post(ZHT.U('shop/orderService/' + url),params,function(data,textStatus){
            // });
          },
          rules: {
            txtCustAmount: {
              required: true
            }
          },//endrule
          messages: {
            txtCustAmount: {
              required: "金额不能为空"
            }
          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
          }
        };

        $("#btnQuery").click(function () {
          $("#quickForm").removeData("validator"); 
          $("#quickForm").validate(_customer_query);
        });

        $("#btnSubmit").click(function () {
          $("#quickForm").removeData("validator"); 
          $("#quickForm").validate(_customer_submit);
        });

      });
  </script>
</body>
</html>

方法二：

如果想点击type='button'普通按钮实现上述效果呢？

可以先初始化所以验证规则，然后点击不同按钮，调用不同的函数，所需验证元素，单独验证，然后通过ajax提交数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <form role="form" id="quickForm">
    <table class="table table-sm table-borderless projects zht_projects_view">
      <tbody>
        <tr id="shopAddressBox">
          <td class="text-end text_gray">
            <span class="text-danger">*</span>邮箱
          </td>
          <td class="form-group">
            <input type="text" id="txtCustEmail" name="txtCustEmail" class="ipt form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>
        <tr id="shopNameBox">
          <td class="text-end text_gray">
            <span class="text-danger">*</span>金额
          </td>
          <td class="form-group">
            <input type="text" id="txtCustAmount" name="txtCustAmount" class="ipt form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>        
        <tr>
          <th></th>
          <td>
            <button id="btnQuery" type="button" class="btn btn-sm btn-danger">验证邮箱</button>
            <button id="btnSubmit" type="button" class="btn btn-sm btn-danger">验证金额</button>
          </td>
        </tr>
      </tbody>
    </table>
    </form>
  <script src="jquery/jquery.min.js"></script> 
  <script src="jquery-validation/jquery.validate.min.js"></script>
  <script src="jquery-validation/additional-methods.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#quickForm').validate({
          rules: {
            txtCustEmail: {
              required: true,
              email: true
            },
            txtCustAmount: {
              required: true
            }
          },//endrule
          messages: {
            txtCustEmail: {
              required: "账号不能为空",
              email: "请录入正确格式的Email地址"
            },
            txtCustAmount: {
              required: "金额不能为空"
            }
          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
          }
        });

        $("#btnQuery").click(function () { 
          // 如果验证不通过，返回false
          if(!$("#txtCustEmail").valid()){
            return;
          }
          console.log('提交邮箱数据');
        });

        $("#btnSubmit").click(function () {
          // 如果验证不通过，返回false
          if(!$("#txtCustAmount").valid()){
            return;
          }
          console.log('提交金额数据');
        });

      });
  </script>
</body>
</html>

参考网址：https://www.cnblogs.com/Cheese_Ren/archive/2009/04/30/1447166.html

赏