layui表单如何获取所有输入项的值

layui表单用form.val('formFilter')可一次性获取所有已绑定字段值，需确保form模块已加载、表单有lay-filter属性、各输入项有正确name；动态添加项需调用form.render()刷新映射表。

layui 表单怎么用 form.val() 一次性取值

直接调用 form.val('formFilter') 就能拿到整个表单所有已绑定字段的值，前提是表单有 lay-filter="formFilter"，且每个输入项有正确的 name 属性。这是最常用也最稳妥的方式。

1. 必须确保 form 模块已加载：layui.use('form')，否则 form.val 是 undefined
2. name 是键名来源，没有 name 的输入框（比如纯展示的 div 或没写 name 的 input）不会被采集
3. 下拉框（select）、复选框（checkbox）、单选框（radio）都支持，但多选 checkbox 的 name 必须带 [] 后缀（如 hobby[]），否则只返回最后一个勾选项
4. 如果表单里混用了非 layui 渲染的原生元素（比如手动插入的 input type="date"），它们不会被自动识别，除非你手动给它们加 name 并确保在表单 DOM 内

为什么 form.val() 有时返回空对象？

常见原因是表单未正确初始化或字段未被 layui 监听。layui 的 form.val() 不是单纯读 DOM，而是依赖其内部维护的字段映射表——这个表只在 form.render() 或页面加载时自动构建一次。

1. 动态追加的表单项（比如 JS 插入的新 input）不会自动加入映射，需手动调用 form.render('input') 或 form.render() 刷新
2. 如果用了 lay-ignore 属性，该元素会被跳过，即使有 name 也不会进结果
3. 表单容器没设 lay-filter，或传错参数（比如写成 form.val('wrongFilter')），都会返回空对象 {}
4. 注意：form.val() 只读取「当前渲染状态」，比如开关（switch）关闭时返回 0，不是 DOM 的 checked 属性值

需要兼容未用 layui 渲染的原始 input 怎么办？

如果部分字段是原生写法、没走 layui 渲染流程，form.val() 拿不到它们。这时候得混合处理：先用 form.val() 取 layui 管理的部分，再用原生 DOM 查询补全。

1. 推荐做法：统一用 document.querySelectorAll('#myForm [name]') 遍历所有带 name 的控件，手动收集值，避开 layui 的限制
2. 对 checkbox 和 radio 要单独判断：el.type === 'checkbox' && el.checked，不然会把未勾选的也塞进去
3. 注意 textarea 和 select 的值获取方式不同，别直接用 el.value —— select 多选要遍历 options，textarea 没问题
4. 如果只是临时应急，不建议长期绕过 form.val()，因为会丢失 layui 对格式化、禁用态等的处理逻辑

取值后想提交，但后端收不到数组字段？

典型问题是多选 checkbox 的 name 没加 []，导致后端只收到一个字符串而非数组。layui 的 form.val() 严格按 name 解析，hobby 和 hobby[] 在结果里完全不一样。

1. name="hobby" → 返回字符串（最后勾的那个）
2. name="hobby[]" → 返回数组（如 ["read", "swim"]）
3. 同理，name="tags[0]"、name="tags[1]" 这种写法 form.val() 不识别，它只认扁平 name，不解析嵌套结构
4. 如果后端要求嵌套 JSON，建议取完值后用 JS 手动组装，别依赖 name 语法“骗过” layui

真正容易被忽略的是：表单重置（form.reset()）后，form.val() 返回的仍是重置前的缓存值，不是实时 DOM 值。要拿最新状态，要么重新触发一次 form.val()，要么监听 submit 事件当场取。