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普通按钮触发验证

点击普通按钮，触发验证规则，然后通过ajax提交表单

分为两种情况，如图

from clipboard

1，页面初始化的时候，就初始化验证规则

from clipboard

2，点击某个按钮，或某个动作，初始化验证规则，可以把验证规则放到一个js函数里

from clipboard

然后点击普通按钮提交表单，并验证$('#addressForm').valid()

from clipboard

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery/jquery.js"></script>
  <!-- jquery-validation -->
  <script src="jquery-validation/jquery.validate.min.js"></script>
  <script src="jquery-validation/additional-methods.min.js"></script>
</head>
<body>
  <form id='addressForm' autocomplete='off'>
    <table class="table table-sm table-borderless projects zht_projects_edit">
      <tbody>
        <tr>
          <th>
            <span class="text-danger">*</span>详细地址：
          </th>
          <td class="form-group">
            <input type="text" id="userAddress" name="userAddress" class="ipt_address form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>
        <tr>
          <th></th>
          <td>
            <!-- 本来不想用这个保存按钮，想用layui弹出框的确定按钮代替，但是当没有收货地址的时候，是直接显示添加表单的，到时候就没有确定按钮了，所以还得用这个保存按钮，不能用layui弹出框的确定按钮 -->
            <button type="button" class="btn btn-sm btn_red" onclick='javascript:editAddress()'>保存</button>
            <input type="hidden" name="id" id="id" class="ipt_address" value="" />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
  <form id='addressForm2' autocomplete='off'>
    <table class="table table-sm table-borderless projects zht_projects_edit">
      <tbody>
        <tr>
          <th>
            <span class="text-danger">*</span>详细地址：
          </th>
          <td class="form-group">
            <input type="text" id="userAddress2" name="userAddress2" class="ipt_address form-control form-control-sm w40p d-inline-block" value="" autocomplete="off">
          </td>
        </tr>
        <tr>
          <th></th>
          <td>
            <!-- 本来不想用这个保存按钮，想用layui弹出框的确定按钮代替，但是当没有收货地址的时候，是直接显示添加表单的，到时候就没有确定按钮了，所以还得用这个保存按钮，不能用layui弹出框的确定按钮 -->
            <button type="button" class="btn btn-sm btn_red" onclick='javascript:editAddress2()'>保存</button>
            <button type="button" class="btn btn-sm btn_red" onclick='javascript:editAddressValidate()'>初始化验证规则</button>
            <input type="hidden" name="id" id="id" class="ipt_address" value="" />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
<script>
$(function () {
	// 收货地址验证规则
  $('#addressForm').validate({
    rules: {
      userAddress: {
        required: true,
      },        
    },
    messages: {
      userAddress: {
        required: "请输入详细地址",
      },        
    },
		onfocusout: function(element){
      $(element).valid();
    },
    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');
    }
  });
});
function editAddressValidate(){
  // 收货地址验证规则
  $('#addressForm2').validate({
    rules: {
      userAddress2: {
        required: true,
      },        
    },
    messages: {
      userAddress2: {
        required: "请输入详细地址22",
      },        
    },
		onfocusout: function(element){
      $(element).valid();
    },
    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');
    }
  });
}
function editAddress() {
	if (!$('#addressForm').valid()) {
		return;
	}
}
function editAddress2() {
	if (!$('#addressForm2').valid()) {
		return;
	}
}
</script>
</body>
</html>

赏

前一篇

jquery.validate.min.js同一表单，多个提...

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

jquery.validate.min.js同一表单，多个提...

jquery-validate remote验证，返回不同的...