lay-verify属性必须直接写在textarea标签上才生效,且需用form.verify()注册函数型校验规则,动态添加的textarea须调用form.render(),长度计算应去除空格并处理特殊字符。

lay-verify 属性写在 textarea 上才生效
很多人把校验规则加在 label 或外层 div 上,结果完全不触发。Layui 的验证逻辑只扫描表单控件自身(input、select、textarea)的 lay-verify 属性。你得直接写在 textarea 标签里:
<textarea name="content" lay-verify="required contentLength"></textarea>
注意:空格分隔多个规则,不是竖线或逗号;required 是内置规则,contentLength 是你要注册的自定义名。
form.verify() 注册时必须用函数,不能用正则数组
文本域常见需求是限制字数(比如 10–500 字)、过滤敏感词、或禁止纯空白。这些都无法靠正则字面量一次性搞定——因为要读取 item.getAttribute('data-max-length') 或调用 value.trim(),必须用函数:
- 正则数组写法(如
[/^.{10,500}$/, '长度不对'])会忽略换行符计数,且无法动态读取属性 - 函数接收两个参数:
value(当前值)和item(DOM 元素),可安全调用item.getAttribute('data-min-length') - 返回字符串即报错,返回
true或undefined表示通过
示例:
form.verify({<br> contentLength: function(value, item){<br> var min = item.getAttribute('data-min-length') || 10;<br> var max = item.getAttribute('data-max-length') || 500;<br> var len = value.replace(/\s/g, '').length; // 去掉空格再算字数<br> if(len if(len > max) return '内容不能超过 ' + max + ' 个字符';<br> }<br>});
动态渲染的 textarea 必须调用 form.render()
如果 textarea 是 Ajax 加载后插入 DOM 的,哪怕 JS 里已注册了 form.verify(),也不生效。原因:Layui 初始化时只扫描页面初始存在的表单元素。
- 插入新
textarea后,必须显式调用form.render() - 若只渲染某类组件,可用
form.render('textarea'),但多数场景直接form.render()更稳妥 - 漏掉这步,你会看到输入后完全没提示,控制台也无报错——最典型的“静默失效”
避免在函数里用 alert() 或 layer.msg() 手动提示
Layui 的验证流程是同步拦截,你在自定义函数里调 alert() 或 layer.msg(),会导致两次提示(一次你的弹窗,一次 Layui 自带的 tips),而且可能阻塞校验链。
- 正确做法:只返回字符串,让 Layui 统一处理提示位置和样式
- 想改提示方式(比如全用
layer.tips),应统一配置全局form.set({verType: 'tips'}),而不是在每个函数里硬编码 - 若需特殊交互(如点击提示跳转到字段),监听
form.on('verify', function(data){})事件更合适
真正容易被忽略的是:文本域的换行符、全角空格、零宽字符都会影响长度计算,别只用 value.length。











