直接用form.val()设置值再调form.render()即可生效;不调则界面不更新、校验失效。form.val()同步layui内部状态,比原生.val()更可靠,且需传lay-filter值而非id。

直接用 form.val() 设置目标字段值,再调用 form.render() 重绘即可生效;不调 form.render(),界面不会更新显示,且后续校验可能失效。
用 form.val() 批量赋值比手动 $().val() 更可靠
layui 的 form.val() 是专为表单设计的赋值方法,它能自动同步 layui 内部状态(比如 select 的高亮项、checkbox/radio 的勾选标记),而原生 jQuery 的 .val() 只改 DOM 值,不触发 layui 修饰逻辑。
- 给 input 赋值:
form.val('example', { 'username': 'admin' }); - 给 select 赋值:
form.val('example', { 'roleType': 'security-role' });—— 必须传真实 value 字符串,不是文本 - 给 checkbox/radio 赋值:
form.val('example', { 'agree': true });(name 相同则用数组,如'hobby': ['1', '3']) - 注意:第一个参数是表单的
lay-filter值,不是 form 元素 ID
必须在 form.on('select(xxx)') 回调里操作
Layui 封装了 select,原生 change 事件无法捕获其变化。监听必须走 layui 自己的事件通道,否则拿不到 data.value,也容易和渲染时机冲突。
- 确保 select 有
lay-filter="xxx",且值全局唯一 - 回调中拿到
data.value后,立即调form.val()设置其他字段 - 例如用户选 “管理员”,自动填入默认审批人:
form.on('select(role)', function(data) { if (data.value === 'admin') { form.val('example', { 'approver': 'zhangsan' }); } }); - 不要在回调里混用
$('input[name=approver]').val('zhangsan'),它不会让 layui 知道值变了
赋值后不 form.render() 会出什么问题
常见现象包括:select 显示还是旧选项、input 值变了但 placeholder 没消失、提交时校验提示“未填写”(因为 lay-verify 认为没输)。
-
form.render()或form.render('select')是强制刷新渲染的关键一步 - 如果只改了 select,用
form.render('select')更轻量;如果同时改了 input/checkbox,建议form.render()全局重绘 - 移动端某些安卓 WebView 下,即使调了
form.render(),仍可能因渲染延迟看不到变化,可加layui.$('#target-input')[0].offsetHeight强制重排 - 特别注意:如果目标 input 初始是
display: none,form.render()不会自动让它可见,得先show()再 render
联动赋值时容易漏掉的清空逻辑
用户从“管理员”切回“普通角色”,你只设置了新值,但没清空之前自动填的审批人,就会造成脏数据或误校验。
- 每次联动赋值前,先判断是否需要清空——比如非“admin”时,应设
approver: '' - 若该字段有
lay-verify="required",切换后还留着值,提交时会绕过校验;反之,清空后又没移除lay-verify,会报“必填”错误 - 更稳妥的做法是:赋值 + 清空 +
form.render()三步闭环,尤其在多条件分支下 - 别依赖用户手动删除,所有自动填充都应配套自动清理
最常被忽略的是:form.val() 只改值,不改验证状态、不触发表单重绘、也不影响 DOM 显隐——这些都得你一条条补全,少一步就卡在某个奇怪状态里。











