推荐使用 layui.form.val('formfilter') 而非 data.field 或 serialize(),因其可随时调用、同步 dom 实际状态、兼容 disabled/lay-ignore,且避免 checkbox 数组遗漏和状态不同步问题。
直接用 layui.form.val('formfilter'),别自己遍历 dom 或用 serialize() —— 后者漏 checkbox 数组、绕过 layui 状态同步、不处理 disabled 和 lay-ignore。
为什么 data.field 和 layui.form.val() 都能用,但推荐后者?
data.field 只在 form.on('submit()') 回调里可用,而 layui.form.val('filter') 可随时调用,比如校验前、弹窗确认时、或异步提交前二次取值。两者返回结构一致,但 layui.form.val() 更灵活、更可控。
- 没触发 submit 事件时,
data.field根本不存在;layui.form.val()仍可执行 - 动态增删表单项后,
data.field不会自动更新状态;layui.form.val()每次都读当前 DOM 实际状态 - 如果你在 submit 回调外(比如按钮点击)需要取值,
data.field就完全不可用
layui.form.val('filter') 返回空对象?检查这三处
空对象不是报错,是静默失败,最容易卡住调试。
-
form元素没写lay-filter="yourFilter",或拼写不一致(比如大小写、多空格) - 调用时
layui.form模块还没加载完成 —— 必须确保在layui.use(['form'], callback)内执行 - 表单里所有控件都没设
name属性,layui.form.val()只认name,不看id或class
checkbox/radio 取不到值?状态不同步是主因
Layui 的 checkbox 渲染后,原生 input 的 checked 属性可能滞后,JS 直接赋值 elem.checked = true 不会触发 layui 内部状态更新。
- 手动勾选后,必须紧接着调
layui.form.render('checkbox'),否则layui.form.val()读的是旧状态 - 全选逻辑别绑
click,要用form.on('checkbox(all)', ...),等 layui 发出事件再取值 - 多个同名 checkbox 中,任意一个带
lay-ignore或父容器有layui-hide,整个 name 就不会出现在返回对象里 - radio 组没有任何一项带
checked属性(哪怕 JS 设了),该 key 就不会出现在结果中
表格勾选项要一起提交?不能靠 layui.form.val()
表格通常不在 form 标签内,或者复选框没设 name,layui.form.val() 根本扫不到它们。
- 必须在
form.on('submit()')里单独处理:$('table input[type="checkbox"]:checked').map(...) - 每个勾选项生成一个
<input type="hidden" name="ids" value="123">插入表单内,让后端按数组接收 - 提交前先清掉旧的:
$('form').find('input[name="ids"]').remove(),避免重复叠加 - 别把 ID 拼成字符串塞进单个 hidden 字段 —— 后端解析困难,且无法区分空字符串和缺失值
真正容易被忽略的不是语法,而是状态同步时机:Layui 的渲染、DOM 属性、内部缓存三者不一致时,val() 就会“看起来没反应”。每次手动改 checkbox/radio 状态后,render 一步不能省。











