layui.form.val() 默认不采集 hidden 输入框的值,因其内部仅遍历 input、select、textarea 且明确过滤 type="hidden" 元素,属设计行为而非 bug;需手动用 dom 查询补全。
layui.form.val() 默认不采集 hidden 输入框的值 —— 因为 layui 的表单数据采集逻辑只处理「可见且可交互」的控件,type="hidden" 虽然有 name 和 value,但被明确排除在 form.val() 的扫描范围之外。
为什么 layui.form.val('filter') 拿不到 hidden 值
layui 内部实现中,form.val() 会遍历 input, select, textarea,但额外过滤掉 type="hidden" 元素(无论是否 disabled 或 lay-ignore)。这不是 bug,是设计行为:hidden 字段通常由后端注入或 JS 动态写入,不属于用户“填写”的范畴。
- 它不响应
lay-verify,也不参与渲染流程 - 即使你给 hidden 加了
lay-filter或lay-ignore,也无效 -
data.field在 submit 回调里同样不包含 hidden 字段
手动获取 hidden 值的可靠方式
必须绕过 form.val(),用原生 DOM 查询补全:
- 用
document.querySelectorAll('input[type="hidden"][name]')或$('input[type="hidden"][name]')精准抓取 - 逐个读取
elem.name和elem.value,合并进form.val()返回的对象 - 注意 name 重复时(如
ids[])需手动转数组,hidden 不支持多值自动聚合
示例:
const formData = layui.form.val('myForm');
const hiddens = document.querySelectorAll('form[lay-filter="myForm"] input[type="hidden"][name]');
hiddens.forEach(el => {
if (el.name) {
formData[el.name] = el.value;
}
});
hidden 字段参与验证或提交的替代方案
如果 hidden 字段实际承载业务逻辑(比如 token、ID、状态标记),更稳妥的做法是:
- 改用
data-属性挂载,提交前用 JS 注入到请求体,而非塞进表单 - 若必须走表单提交,把 hidden 改成
input type="text" class="layui-hide" readonly—— 这样既保持隐藏视觉,又会被form.val()正常采集,且不被用户修改 - 避免用
display: none+lay-verify,这会导致验证触发却无法输入,体验断裂
真正容易被忽略的是:hidden 字段一旦参与业务判断,就该脱离「表单采集黑盒」,显式管理它的读写时机和来源。依赖 form.val() 自动兜底,反而会让数据流变得不可见。











