必须用 form.val() 且第一个参数 filter 不能省;赋值前须调 form.render() 否则 UI 不更新,因它只同步内部状态和原生 value,不负责渲染。

必须用 form.val(),且第一个参数 filter 不能省;赋值前没调 form.render(),UI 就不会变——不是 bug,是设计逻辑。
为什么 form.val("userForm", {...}) 没反应?
常见现象:控制台没报错、DOM 的 value 属性确实改了,但 select 下拉框没变、checkbox 还是空的、提交时也拿不到新值。
-
form.val()不负责渲染 UI,只同步 layui 内部状态和原生控件 value;封装组件(如带箭头的select、开关式checkbox)必须靠form.render()触发重绘 - 如果表单是动态插入的(比如
layer.open弹窗里),form.render()必须在 DOM 插入完成之后、form.val()之前执行 -
lay-filter="userForm"必须写在class="layui-form"的容器上,且form.val()第一个参数要严格匹配这个值,大小写、空格都不能错
怎么给 checkbox / radio 正确赋值?
layui 原生 form.val() 对多选 checkbox 支持很弱:同名多个 input[type=checkbox],传 {"roles": ["admin", "editor"]} 会失效,它只认最后一个或第一个。
- 取值时,别依赖
form.val("userForm"),改用 jQuery 手动收集:$('input[name="roles"]:checked').map((_, el) => el.value).get() - 赋值时,先清空所有勾选:
$('input[name="roles"]').prop('checked', false),再遍历数组逐个设:$('input[name="roles"][value="admin"]').prop('checked', true) - 最后必须调
form.render('checkbox'),否则视觉不更新
disabled 或 readonly 字段赋不了值?
form.val() 和 form.render() 都会跳过带 disabled 或 readonly 属性的字段——这是明确行为,不是 bug。
- 临时解法:赋值前移除属性,赋完再加回,例如:
$('#status').removeAttr('disabled').val('1'); form.render('select'); - 更稳妥做法:用 CSS 模拟禁用,比如
style="background:#eee; pointer-events:none;",保留 DOM 可操作性 - 千万别指望
form.val()读取 disabled 字段的值,它直接过滤掉;需要值就从原始数据源(比如 AJAX 返回的data)里拿
iframe 弹窗里怎么赋值?
父页 JS 无法直接访问子页的 form 实例。你在父页写 form.val("editForm", ...),实际操作的是父页里根本不存在的表单。
- 正确做法:在 iframe 子页内定义一个全局方法,比如
window.setFormData = function(data) { form.val("editForm", data); form.render(); } - 父页通过
layer.getChildFrame('body', index).contents().find('iframe')[0].contentWindow.setFormData(...)调用(注意跨域限制) - 更推荐方案:用
layer.open的success回调,在弹窗 DOM 就绪后,用$(layer.getChildFrame('body', index)).find(...)定位并操作子页元素
真正容易被忽略的点:form.render() 的第二个参数(filter)不是可选的“优化项”,而是定位作用域的关键。漏传或传错,render 就只刷了别的表单,当前表单依旧静默——这种问题查起来最耗时间。


















