编辑框失焦时需手动监听blur事件校验,恢复非法值并更新table.cache;数字列用parseFloat+isNaN判断,邮箱用严格正则,所有输入先trim;避免reload闪屏,移动端需兼容键盘收起延迟。
edit 编辑框失去焦点时怎么触发校验
layui 的 edit 列默认不校验,改完直接回写到数据里。必须手动监听 blur 事件,在单元格编辑框失焦时介入。注意:不能靠 on('edit') 回调——它只在值变更后触发,且无法阻止非法值写入。
实操建议:
- 用
table.on('edit(tableFilter)', ...)拿到事件对象,从中提取e.elem(当前 input 元素)和e.value(新值) - 立刻对
e.elem绑定一次性的blur监听,避免重复绑定 - 在 blur 回调里做校验,若不合法,调用
e.elem.value = e.oldValue恢复原值,并用layer.msg()提示 - 别忘了手动触发
table.cache更新或调用table.reload()重绘(视是否启用了done回调而定)
数字/邮箱/必填等常见格式怎么写校验逻辑
layui 自身不提供内置校验规则,得自己写正则或判断。关键不是“怎么写正则”,而是“在哪执行、怎么反馈”。比如数字列允许空但不允许负数,邮箱列必须含 @ 且格式基本合规。
常见错误现象:NaN 写进数字字段、abc 被当成邮箱、空格没 trim 导致邮箱校验失败。
实操建议:
- 对数字列:用
parseFloat(value)+!isNaN()+value.trim() !== ''组合判断,别只用Number(value)(会把空字符串转成 0) - 对邮箱:用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/,别用过于宽松的.*@.*\..* - 所有输入都先
value.trim(),再校验,否则前后空格会导致校验通过但业务出错 - 校验失败后,除了恢复值,最好聚焦回该 input 并
select(),方便用户重输
为什么校验后表格数据没更新,或者 reload 报错
本质是数据同步时机没理清:layui 表格渲染后,原始数据存在 table.cache['tableFilter'] 里,但 edit 事件只改 DOM,不自动同步 cache;而 table.reload() 若没传 data,会重新请求接口,不是刷新本地缓存。
性能与兼容性影响:频繁 reload 会闪屏、丢失滚动位置;直接改 cache 又容易漏掉关联字段(如合计列)。
实操建议:
- 校验通过后,手动更新 cache:
var cache = table.cache['tableFilter']; cache[e.trIndex][e.field] = e.value; - 如果用了
cols中的templet或toolbar,记得同步更新对应 DOM 文本(用e.tr.find('td[data-field="' + e.field + '"]')定位) - 避免在 blur 里调用
table.reload(),除非你明确需要重新拉取全部数据 - 如果表格启用了分页,改了某页数据后,记得调用
table.render({ elem: '#id', data: cache })局部重绘
移动端点击编辑框后键盘收起太快,校验来不及触发
这是 iOS Safari 和部分安卓 WebView 的典型问题:input 失去焦点时,软键盘收起导致 blur 短暂延迟,有时甚至不触发。用户点保存按钮前就切走了,校验就漏了。
使用场景:手机端扫码录入、现场快速填报。
实操建议:
- 别只依赖 blur,加一层「确认保存」动作:给每行加个隐藏的「√」按钮,点击才触发校验+提交
- 或监听
input事件做实时提示(如红框+文字),但最终合法性仍以 blur 或确认操作为准 - 对
edit: 'text'列,可监听keydown.enter做即时校验,弥补 blur 不稳定的问题 - 测试务必真机跑,模拟器常掩盖这个 bug











