layui lay-verify 自定义验证规则的正确放置位置

作者:工具松鼠时间:2026-10-23 11:18:55浏览:305

本文详解 layui 中 lay-verify 自定义验证规则的注册位置。重点指出 form.verify 必须置于 layui.use 内部且位于 form.on 监听器之外,否则验证将不触发。通过 HTML 与 JS 代码示例,展示如何正确定义正则匹配及错误提示,避免常见配置错误。

layui lay-verify 自定义验证规则的正确放置位置

关于 layui 表单模块的官方文档,可参考:https://www.layui.com/doc/modules/form.html#verify

尽管 layui 官方文档已相当详尽,但初次使用者在配置 lay-verify 自定义验证规则时,往往对代码的具体放置位置感到困惑。本文旨在记录并澄清这一关键点。

首先看 HTML 部分的配置:


<input type="text" lay-verify="digital" placeholder="请输入数字">
<button type="button" class="layui-btn layui-btn-norma" lay-submit lay-filter="submit_button">提交</button>

接着是 JavaScript 部分的实现逻辑:


form.verify({
 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
 ,digital: [
  /^[0-4]*$/
 ,'请填入0-4的分数'
 ] 
}); 

这种写法在功能上没有问题,但官方文档未明确强调 form.verify 的具体放置层级,开发者通常需要自行调试才能确认。关键在于,form.verify 必须定义在 layui.use 回调函数内部,且务必放在 form.on('submit(...)') 监听器之前。如果将其错误地放置在提交监听函数内部,会导致自定义验证规则无法触发。


layui.use(['form'], function () {
  var form = layui.form;
  //要放在form.on外面,千万不能放在提交步骤中,否则会不触发
  form.verify({
   //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
   digital: [
    /^[0-4]*$/
    ,'请填入0-4的分数'
   ]
  });
  form.on("submit(submit_button)", function (data) {
   return false;
  });
 });

以上就是 layui lay-verify 自定义验证规则详解的全部内容,希望能为读者提供有效的参考,并欢迎大家继续支持本站。

作者最新文章