layui table edit 正整数校验需监听 edit(table) 事件,用 /^\d+$/ 正则判断输入值,非法时设回 event.oldValue;lay-verify 等表单验证在表格 edit 中无效。
layui table edit 输入框如何绑定正整数校验
直接在 edit 字段配置中加 type: 'number' 不够——它允许负号、小数点和空值,根本拦不住用户输 -123 或 3.14。真正起效的方式是结合 event 监听 + 正则过滤 + 手动重置值。
用 on('edit(table)') 拦截并修正非法输入
layui 的 edit 模式触发后,会派发 edit(table) 事件,这是唯一能实时干预编辑内容的入口。别试图改 input 的 oninput,表格单元格的编辑器是动态创建的,DOM 时机难控。
- 监听事件时必须确保 table 实例已渲染完成(即
table.render()后再绑定) - 用
event.elem.value获取当前输入值,用正则/^\d+$/判断是否为纯正整数 - 不匹配时,立即设回原值(
event.oldValue),否则用户看到错误值却没反馈 - 注意:不能用
return false阻止事件,这会中断 layui 内部的更新逻辑
table.on('edit(test)', function(event){
const val = event.elem.value.trim();
if (!/^\d+$/.test(val)) {
event.elem.value = event.oldValue;
}
});
为什么不用 lay-verify="number" 或表单验证?
lay-verify 是 layui 表单模块的机制,只对 form.on('submit') 生效;表格 edit 模式走的是独立流程,完全不触发表单验证。强行套用只会失效,且 lay-verify="number" 本身也接受负数和小数。
-
lay-verify="required|number"对 table edit 无效 - 表格没有
form上下文,form.verify()注册的规则不会被调用 - 想统一管理?只能自己封装校验函数,在
edit事件里显式调用
额外要注意的边界情况
用户快速连按退格、粘贴、全选后输入等操作,会导致 event.elem.value 瞬间为空或含非数字字符。光靠正则还不够,得兜底处理:
- 空字符串、全空格应视为非法,清空时自动回退到
oldValue - 粘贴内容(如带单位的
"123px")需先replace(/\D/g, '')过滤再校验 - 如果字段允许“0”,
/^\d+$/是对的;若不允许“0”,改成^[1-9]\d*$ - 移动端软键盘弹出后,部分安卓机型会忽略
input事件,建议加blur双保险(但 blur 无法撤回,仅作二次提示)
edit(table),在回调里用正则比对 + 值回写。其他所有花哨方案,不是时机不对,就是根本没进 layui 的编辑流。


















