真正起效的永远是「输入即清洗」:要么靠 oninput 实时删非数字,要么靠 edit(table) 事件兜底重置;min/max 和 range 等属性仅控制范围,不拦截非法字符。

直接用 lay-verify="number" 不够——它只在表单提交时校验,输入过程中完全拦不住字母、负号、小数点甚至粘贴的“abc123”。
为什么 type="number" + lay-verify="number" 会失效
浏览器原生 type="number" 允许输入 e、E、+、-、.,输完再失焦才变空字符串;lay-verify="number" 是 layui 表单模块的提交钩子,表格 edit 模式或纯 <input> 不走这个流程。用户一粘贴 “¥100.5” 或拖入文本,值就进去了。
oninput + 正则实时过滤最稳
在输入框上绑定 oninput,每次内容变化都清洗一遍,比等 blur 或 submit 更及时:
-
value.replace(/[^\d]/g, '')删掉所有非数字字符 - 如果需要保留“0”,用
parseInt(value) || 0防止空字符串转成NaN - 若字段不允许前导零(如不能输“007”),得额外加
.replace(/^0+(\d)/, '$1') - 注意移动端软键盘触发
oninput有时延迟,可加onblur双保险(但 blur 无法撤回,只能提示)
示例写法:
<input type="text" class="layui-input" oninput="this.value = this.value.replace(/[^\d]/g, '')" />
表格单元格 edit 模式必须监听 edit(table) 事件
Layui 表格的编辑器是动态生成的,DOM 时机不可控,oninput 绑不上。唯一可靠入口是 table.on('edit(filter)', ...):
- 用
event.elem.value拿当前输入值,event.oldValue是原始值 - 正则
/^\d+$/校验:匹配成功才放行,否则立刻设回event.oldValue - 别用
return false,会中断 layui 内部更新逻辑 - 空值、全空格、粘贴带单位内容(如“123px”)都要先
trim()再replace(/\D/g, '')清洗
关键两行:
table.on('edit(test)', function(event) {
const val = event.elem.value.trim().replace(/\D/g, '');
if (!/^\d+$/.test(val)) event.elem.value = event.oldValue;
});
min/max 和 range 属性只控制范围,不控制字符类型
min="0" max="100" 或 range="[0,100]" 能防超界,但拦不住用户输 “-50” 或 “100.5”——因为这些值在输入过程中仍是合法字符串。它们只在最终提交或调用 form.val() 时被验证,且依赖 lay-verify="value:[0,100]" 配合生效。单独用毫无输入拦截效果。
真正起效的永远是「输入即清洗」:要么靠 oninput 实时删非数字,要么靠 edit(table) 事件兜底重置。其他所有属性都是辅助,不是防线。


















