应使用 layui.form.val('formFilter') 直接获取表单数据,它自动处理 checkbox/radio 聚合、忽略禁用项和 lay-ignore 元素,无需手动遍历 DOM;需确保 form 有正确 lay-filter,动态添加字段后须调用 layui.form.render()。

layui.form.on 之外怎么拿到整个表单的数据
直接用 layui.form.val(),它专为这个场景设计,比遍历 DOM 或手动拼对象靠谱得多。别自己写 document.querySelectorAll('input,select,textarea') 再逐个取 value,容易漏掉禁用项、未渲染的动态字段,也绕过 layui 对 checkbox/radio 的值聚合逻辑。
调用方式很简单:layui.form.val('formFilter'),其中 formFilter 是你给 form 元素设置的 lay-filter 值。它返回一个纯对象,键是各表单项的 name,值是用户输入或选中的内容(多选 checkbox 会自动转成数组)。
- 如果没设
lay-filter,layui.form.val()会返回空对象,不是报错 —— 这点容易忽略,检查下你的<form lay-filter="userForm">是否写对了 - 禁用(
disabled)的表单项不会被包含在返回结果里,这是预期行为,不用额外过滤 - 带
lay-ignore的元素(比如自定义富文本容器)也不会参与采集
遇到 checkbox 和 radio 取不到值?检查 name 和 checked 状态
layui.form.val() 依赖原生 name 属性和当前 DOM 的 checked / selected 状态。如果你用 JS 动态修改了 checkbox 的勾选但没触发 layui 的内部更新,form.val() 仍会读旧值。
常见翻车点:
- 用
elem.checked = true改状态后,没调layui.form.render('checkbox')—— 这会导致视图和内部状态不同步 - 多个 checkbox 共享同一个
name,但部分被lay-ignore或放在layui-hide容器里,它们会被跳过 - radio 组中没有一项被默认选中(
checked属性缺失),form.val()就不返回该name的键
提交前想校验再取值?别先 serialize 再 parse
有人习惯先用 $(form).serialize() 得到 query string,再用正则或 URLSearchParams 解析 —— 完全没必要。这既绕过 layui 对表单控件的封装逻辑,又无法正确处理数组型值(如多选 checkbox),还可能因编码问题丢数据。
正确做法:在提交事件回调里直接调 layui.form.val('yourFilter'),然后做业务校验:
form.on('submit(save)', function(data){
const formData = layui.form.val('userForm');
if (!formData.username) {
layer.msg('用户名不能为空');
return false;
}
// 后续发请求...
});
注意 data.field 也是可用的,它是 form.val() 的等价返回值,但只在 submit 回调里存在;而 form.val() 可在任意时机调用,更灵活。
动态增删表单项后 val() 拿不到新字段?重载 form 模块
用 JS 动态插入了新的 input 并设置了 name,但 form.val() 仍不返回它 —— 因为 layui 的 form 模块在初始渲染时已绑定控件监听,新增的 DOM 不在它的管理范围内。
解决办法只有两个:
- 插入后立即调
layui.form.render('select')(或'checkbox'、'radio',按类型指定),让 layui 重新扫描并绑定;如果是普通 input/textarea,通常不用 render,但必须确保它有name且不在lay-ignore范围内 - 更稳妥的方式:所有动态字段都用
layui.form.addInput()等 API 添加(如果存在),但目前 layui 2.9.x 并未暴露这类方法,所以实际只能靠render()+ 手动补name
最常被忽略的是:动态加的字段如果用了自定义 lay-filter 或嵌套在折叠面板里,render 范围没覆盖到对应节点,就还是取不到。这时候得确认 render 的作用域是否包含新 DOM 的父容器。


















