layui表单动态生成必须严格遵循其字段映射规则:type值须为内置类型(如text、select等),select/radio/checkbox需options含value和title,date需lay-key,name须唯一非空且扁平化;生成后必须调用form.render(),嵌套json需展平,verify规则须手动注册,disabled/readonly需手动设置。
能直接用,但必须严格匹配 layui.form 的字段映射规则,否则表单控件不渲染、验证失效或值无法回填。
JSON 字段名和 type 值必须与 Layui 内置组件对齐
Layui 不识别任意字段名,它只认预设的 type 类型(如 text、select、checkbox、radio、date 等),且每个类型依赖特定字段参与渲染:
-
type: "select"时,必须提供options数组,每个项含value和title(不是label或name) -
type: "checkbox"或type: "radio"时,options必须是数组,且每项需有value和title;若缺title,选项文字为空 -
type: "date"需要显式声明lay-key(用于绑定 laydate 实例),否则日期控件不激活 -
name字段必须唯一且非空,它是表单序列化和验证的依据;重复或为空会导致form.val()读不到值
动态生成前必须调用 form.render(),且时机不能错
仅靠拼 DOM 不会触发 Layui 表单样式和事件绑定。常见错误是:生成完 <input> 就结束,没通知框架重绘。
- 所有字段 DOM 插入完成后,必须执行
layui.form.render('all')或指定类型如layui.form.render('select') - 如果表单嵌在弹层(
layer.open)里,要在success回调中调用render,不能放在content字符串里就完事 - 若 JSON 配置含
verify规则(如"required|email"),还需同步调用form.verify()注册自定义校验,否则验证不生效
form.val() 读写依赖 name 属性,JSON 中 name 不能含点号或方括号
Layui 的 form.val('filterName', data) 和 form.val('filterName') 仅支持扁平 name,例如 username、user_email 可用,但 user.info.name 或 items[0].price 会被忽略。
- 后端返回的嵌套结构 JSON,必须在前端展平后再喂给表单生成逻辑
- 回填时若字段不存在于当前 DOM,
form.val()静默失败,无报错 —— 建议生成后用$('[name="xxx"]').length校验字段是否真实存在 - checkbox/radio 的初始选中状态靠
value匹配,不是靠checked: true字段;多选 checkbox 要传数组,单选 radio 传字符串
验证规则字符串需提前注册,不能仅靠 JSON 里的 verify
verify 字段只是声明规则名(如 "required|mobile"),但 Layui 不内置 mobile,必须手动用 form.verify({ mobile: [...] }) 定义。
- 常见漏注册:自定义手机号、身份证、密码强度等规则,JSON 里写了却没在 JS 中
form.verify() - 规则函数返回
false或字符串才会触发提示;返回undefined或true视为通过 - 若 JSON 中
verify是空字符串或null,Layui 会跳过该字段验证,但不会报错 —— 容易误以为“没生效”其实是配置被忽略了
最易被忽略的是:Layui 表单动态生成不自动处理 disabled、readonly 状态,也不响应 JSON 中的 disabled: true 这类字段 —— 这些得靠生成后手动加 attr('disabled', 'disabled'),否则 UI 和实际行为不一致。











