在使用layUI这款开源模块化前端 UI 框架是,如何自定义表单验证规则?
有两种写法,第一种是函数式方式,第二种是数组的形式;其大致代码已写在官网上,这里不再赘述,需要请查看 :

form.verify({
  username: function(value, item){ //value:表单的值、item:表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式,也支持下述数组的形式
  //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位,且不能出现空格'
  ] 
});

                               图 1.官方文档        

本文主要记录在使用过程中出现的细节问题。

函数式写法,也就是你看到的这一段:

form.varify({
     pass: [
     /^[\S]{6,12}$/
     ,'密码必须6到12位,且不能出现空格'
   ] 
 })


这一写法需要注意三点,特别注意:这三点必须同时做到才能正确设置自定义表单验证:

1.引用这段代码之前,需要先从layUI中获取form对象,再赋值给form

var form = layui.form
    form.verify({
    pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位,且不能出现空格'
  ] 
})

图2.js中的写法

2.这段代码是需要写在js文件中的

3.layUI的引用顺序
在html文件中,layUI的引用应该放在最前的

<body>
    <!-- 导入layUI -->
    <script src="/assets/lib/layui/layui.all.js"></script>
    <!-- 导入jQuery -->
    <script src="/assets/lib/jquery.js"></script>
    <!-- 导入自己的js脚本 -->
    <script src="/assets/js/login.js"></script>
</body>

图3.html文件中的引入

最后,当你自定义了类似上面的验证规则后,你只需要把 key(图二中的pass,若有多个key值,以“|”进行分隔) 赋值给输入框的 lay-verify 属性即可:


1. <input type="text" lay-verify="required|username" placeholder="请输入用户名">
2. <input type="password" lay-verify="required|pass" placeholder="请输入密码">

官方文档:表单模块文档 - Layui