Layui表单需手动实现输入即保存：监听input/change事件、加防抖、只提交变更字段、校验类型、设JSON格式请求。submit事件仅响应按钮点击，不适用于实时保存。
layui 表单本身不支持“输入即保存”，必须手动监听变化、防抖、校验、发请求——否则用户输完直接关页，数据就丢了。
form.on('submit') 不等于实时保存
很多人误以为绑定 form.on('submit') 就能实现实时，其实它只响应「点击提交按钮」。要实时，得监听 input/textarea 的 input、change 或 blur 事件。
- 对普通文本框，推荐用
input事件（即时触发），但需加防抖，否则每敲一个字都发请求 - 对 select 或 checkbox，用
change更稳妥，避免未完成选择就触发 - 别在
form.on('submit')里写实时逻辑——它和实时无关，只是表单最终提交入口
怎么监听并提取变更字段
layui 的 form.on('submit') 回调里有 data.field，但实时场景下你得自己从 DOM 拿值。关键点是：别用全局 form.val() 全量取，而应只取当前变动的元素。
- 给每个需要实时保存的字段加唯一
name，比如<input name="username"> - 监听时用
$(e.target).attr('name')获取字段名，再用$(e.target).val()取值 - 如果是
lay-select，注意form.on('select(xxx)')的data.value是 lay-value，真实select的 value 可能不同，需同步：$('#xxx').val(data.value) - checkbox/radio 要转布尔或数字：
$(e.target).is(':checked') ? true : false，避免后端收到字符串 "on"
防抖 + 差异比对 + 请求控制
没防抖的实时保存，用户连打 “admin” 就可能发 5 次请求；没比对就发，空格、换行等无效修改也会污染后端。
- 用
setTimeout+clearTimeout实现 300ms 防抖，每次输入重置定时器 - 缓存上一次成功提交的值（如
window.lastSaved = { username: 'old' }），提交前做浅比对：JSON.stringify(newVal) !== JSON.stringify(lastSaved[field]) - 请求中禁用对应字段或加 loading 状态，防止重复触发：
$(e.target).prop('disabled', true) - 失败时还原 DOM 值，并提示用户，否则界面和后端状态会不一致
后端接收要注意什么
前端发的结构，后端往往不认——尤其是字段名、类型、嵌套层级。
- 别直接传
data.field对象，它包含所有字段；实时保存应只传变更字段：{ field: 'username', value: 'newname' } - 如果后端要求整行更新，必须补全主键（如
id），否则 400 或覆盖错误记录 - contentType 必须设为
"application/json"，且 data 用JSON.stringify()包裹，否则 Express/Koa 解析不到 body - 日期、数字字段别传字符串，前端先
parseInt()或new Date().toISOString()，避免后端类型校验失败
最易被忽略的是：移动端软键盘收起时不会触发 blur，得监听 focusout 或页面 visibilitychange 做兜底；还有，多个表单共存时，防抖 timer 和 lastSaved 缓存必须按字段隔离，不能共用一个变量。
