应使用 oninput 事件实时过滤修正输入值,通过正则 /^\d+(\.\d{0,2})?$/ 匹配整数或一至两位小数,并在每次输入后立即截断多余小数位、去除非法字符,而非依赖 form.verify 或 onblur 校验。

layui input 怎么用 oninput 实时限制两位小数
直接改 oninput 事件最可靠,onblur 或提交时校验都晚了——用户已经输完、光标移走了,再提示修改体验差,还容易绕过。
关键不是“阻止输入”,而是“实时过滤并修正”:每次按键后立刻把非法字符(比如第三个点、多余小数位)干掉,再把值塞回 input。Layui 的 form.on('submit') 不管这个,得自己动手。
- 正则建议用
/^\d+(\.\d{0,2})?$/:匹配整数、或一位/两位小数,不接受.123这种无整数位的写法(如需支持,改用/^\d*\.?\d{0,2}$/,但要注意空字符串和纯小数点的边界) - 别用
parseFloat+toFixed(2),它会四舍五入(比如输1.999变成2.00),而用户要的是“截断式限制”,不是格式化 - Layui 渲染后 input 是原生 DOM,直接
document.getElementById或$('input[name="price"]')拿到即可,不用等form.render()
document.getElementById('price').oninput = function() {
let v = this.value;
// 允许空、负号、数字、一个小数点
if (!/^[-\d.]*$/.test(v)) {
this.value = v.replace(/[^-\d.]/g, '');
return;
}
// 限制小数点后最多两位,且只允许一个点
let parts = v.split('.');
if (parts.length > 2) {
this.value = parts[0] + '.' + parts.slice(1).join('');
} else if (parts.length === 2 && parts[1].length > 2) {
this.value = parts[0] + '.' + parts[1].substring(0, 2);
}
};
为什么不能只靠 lay-filter + form.verify 自定义验证
form.verify 只在表单提交或 form.validate() 时触发,对输入过程完全无感。用户可以一路狂敲 123.456789,直到点提交才弹错——这时候他得手动删掉后三位,很挫败。
-
form.verify里 return 的字符串是错误提示,不是拦截逻辑,拦不住输入行为 - 如果配合
lay-verify="number",它只检查是否为数字,根本不理小数位数 - 想在验证函数里改
this.value?不行,验证函数运行时 input 已失焦,DOM 值已定,改了也白改
兼容性注意:移动端软键盘和粘贴场景
安卓微信、iOS Safari 下,软键盘可能触发多次 input,或用户长按粘贴一串带小数的数字(比如从 Excel 复制 99.999),这时候单纯监听 input 仍可能漏处理。
- 必须加
onpaste事件,阻止默认粘贴后再手动解析、截断 - 部分安卓机
input在删除时可能不触发,可补一个onkeyup监听退格/删除键,但优先级低于input - 避免用
input[type="number"]:iOS 上会唤出数字键盘但不支持小数点,且各浏览器对step="0.01"支持混乱,Layui 官方也不推荐
如果你用的是 layui 3.x 的 form.render 后的动态表单
动态插入的 input(比如表格行内编辑)需要在插入 DOM 后立即绑定事件,不能只靠页面加载时的一次绑定。
- 不要写
$('input[name="amount"]').on('input', ...)—— 动态元素没绑定上 - 改用事件委托:
$(document).on('input', 'input[name="amount"]', function(){...}) - 或者在
form.render()回调里重新绑定,确保 DOM 已就绪
真正麻烦的不是正则怎么写,而是得同时兜住键盘输入、粘贴、剪切、拖拽、移动端软键盘切换这些路径——少一个,用户就能输进三位小数。











