最常用提交前修改数据的方式是在form.on('submit')回调中直接操作obj.field对象,可增删改字段;需注意obj.field仅在事件触发时存在,且须用form.val()同步DOM值,防回车误提交应强制失焦,校验失败后需手动回填数据。

form.on('submit') 里直接改 obj.field
提交前修改数据最常用也最直接的方式,就是在 form.on('submit') 回调里操作 obj.field 对象。它不是只读的,你可以增、删、改任意字段,Layui 会把最终这个对象作为 POST 数据发出去。
常见错误是试图在回调外提前改 obj.field —— 它只在事件触发时存在,没地方存、也没法提前干预。
- 想加时间戳:
obj.field.submit_time = new Date().toISOString(); - 想过滤空格:
obj.field.username = obj.field.username?.trim() || ''; - 想合并两个字段:
obj.field.full_name = [obj.field.first_name, obj.field.last_name].filter(Boolean).join(' '); - 注意:如果字段名含点号(如
user.info.age),obj.field里实际是扁平化的键名(user.info.age),不是嵌套对象
用 form.val() 同步表单 DOM 和 field 数据
如果你在提交前手动改了 input 的 value(比如 JS 赋值、或用户还没失焦),obj.field 可能拿不到最新值 —— 因为 Layui 默认只在 submit 触发时采集一次 DOM 值。
这时候得先调用 form.val() 强制同步:
- 同步整个表单:
layui.form.val('your-filter', { username: 'new-value' }); - 再触发 submit 时,
obj.field就包含你刚设的值 - 或者更稳妥:在
form.on('submit')开头就执行一次form.val('your-filter'),确保 DOM 和缓存一致
防回车误提交导致的数据丢失
用户按回车提交时,如果表单里有未失焦的输入框,它的值可能没被 Layui 捕获进 obj.field —— 尤其是 textarea 或带格式编辑器的场景。
这不是 bug,是浏览器原生行为 + Layui 采集时机导致的。解决办法只有两个:
- 给所有 input/textarea 绑定
keydown监听,遇到 Enter 键先e.preventDefault(),再手动触发 submit - 统一在
form.on('submit')开头加一行$('input, textarea').blur();,强制所有控件失焦,让 Layui 下次采集时拿到最新值
后端返回校验失败时,如何保留用户已填但未提交的修改
很多人以为 obj.field 是实时绑定的,其实不是。一旦 submit 触发、请求发出,后续再改 obj.field 没用 —— 它只是那次请求的快照。
真正要“保留现场”,得靠前端状态管理:
- 提交前把
obj.field浅拷贝一份存到变量里(如pendingData = {...obj.field}) - 后端返回校验失败后,用
form.val('filter', pendingData)把数据刷回去 - 别用
$('#xxx').val(xxx)直接写 DOM,Layui 表单控件(如 select、radio)不响应这种写法
obj.field 看似简单,但容易漏掉失焦同步、回车时机、异步回填这几个关键节点。


















