layui lay-verify form表单自定义验证规则详解

下面是关于“layui lay-verify form表单自定义验证规则”的详细攻略：

简介

Layui是一款非常流行的前端UI框架，其有丰富的组件和易于使用的API，而在Layui中，表单验证是非常常见和重要的功能。Layui通过lay-verify实现表单验证，可以通过自定义lay-verify来设置表单验证的规则。

自定义验证规则

在Layui中，自定义验证规则是通过设置lay-verify属性实现的，具体使用方法如下：

<form class="layui-form" lay-filter="test-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="test-submit">提交</button>
  </div>
</form>

在上述代码中，lay-verify属性的值分别为“username”和“password”，这是我们自定义的验证规则名字。

接下来，我们需要在js中编写相应的验证规则：

layui.use('form', function () {
  var form = layui.form;

  //自定义验证规则
  form.verify({
      username: function(value, item){ 
          if(!/^[a-zA-Z0-9_-]{4,16}$/.test(value)){
              return '用户名必须由4到16位（字母/数字/横线/下划线）组成'; 
          }
      },
      password: function (value, item) {
          if (!/^[\S]{6,12}$/.test(value)) {
              return '密码必须6到12位，且不能出现空格'; 
          }
      }
  });

  //监听提交
  form.on('submit(test-submit)', function (data) {
      console.log(data.field);
      return false;
  });
});

在上述代码中，我们使用form.verify()方法来实现自定义规则，“username”和“password”分别对应上面表单中对应的lay-verify属性的值。其中，验证规则可以是任意的JavaScript函数，包含两个参数：value和item。value表示当前值，item表示当前表单元素。在验证规则中，如果验证不通过，可以返回一个自定义的提示信息。

示例说明

下面，我们来给出两个详细的示例说明，帮助大家更好地理解自定义验证规则。

示例1：邮箱验证

假设我们需要验证一个邮箱是否符合规范（即可以包含字母、数字、横线和下划线，以及“@”和“.”符号），那么我们可以自定义邮箱规则如下：

form.verify({
    email: function(value, item){
      if(!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)){
          return '邮箱格式不正确';
      }
    }
});

示例2：身份证号码验证

假设我们需要验证一个身份证号码是否符合规范（即中国大陆的身份证号码），那么我们可以自定义身份证号码规则如下：

form.verify({
    idcard: function(value, item){
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if(!reg.test(value)){
          return '身份证号码格式不正确';
      } 
    }
});

总结

通过自定义lay-verify规则，我们可以实现各种各样的验证规则，从而满足不同的业务需求。在自定义验证规则时，只需要使用form.verify()函数，并传入一个验证规则的对象。在验证规则对象中，每个验证规则的名称即为该验证规则的lay-verify值，函数式验证规则的核心代码，可以根据实际需求进行自由编写。