表单字段变化后必须用 form.on('select/filter-name') 等监听子表单显隐，禁用原生 change；子表单容器须独立且不在 layui-form-item 内，隐藏用 style="display:none"；显隐时需同步清空值、操作 lay-verify 属性并单独渲染对应组件。

表单字段变化后如何触发子表单区域显隐

必须用 form.on('select/filter-name') 或 form.on('checkbox/filter-name') 监听，不能绑原生 change 事件。Layui 的 select/checkbox 是重绘的 DOM，原生 input 被隐藏，直接监听会拿不到实时状态。

常见错误是写 layui.$('#my-select').on('change', ...)，结果首次加载或动态渲染后完全不触发。

• select 类型：监听 form.on('select(your-filter)', callback)，data.value 是当前选中值
• checkbox 单选：同上，data.elem.checked 可靠
• checkbox 多选组：需遍历 layui.$('input[name="xxx"]:checked') 统计数量，不能只信单次 data.elem.checked
• radio 组：同样用 form.on('radio/filter-name')，data.value 是选中项 value

子表单区域怎么组织 DOM 才不被 form.render() 破坏

子表单容器必须是独立的

，且不能嵌套在

内部——否则 form.render() 可能重置其高度、padding 或触发样式抖动。

初始状态推荐用 style="display:none"，而不是 layui-hide。因为 layui-hide 依赖全局 CSS，某些主题或自定义样式可能覆盖它，导致隐藏失效。

• 容器加唯一 ID 或 data-id，方便 JS 定位：
  ...
• 不要把子表单 HTML 写死在主表单 HTML 里，尤其是带 lay-verify 的输入框——隐藏后仍参与校验
• 若子表单含 select/checkbox，显隐后需单独调用 form.render('select') 或 form.render('checkbox')，不能只调 form.render()

隐藏时怎么避免校验失败和值残留

单纯 display: none 不影响 form.val() 和 form.verify()，有 required 规则的字段即使不可见也会报错。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

正确做法是三步：清空值 → 移除校验属性 → 隐藏容器。恢复时反向操作：设回值 → 补全 lay-verify → 显示容器。

• 隐藏时：layui.$('#target-input').val('').attr('lay-verify', '')
• 显示时：layui.$('#target-input').attr('lay-verify', 'required|phone')（按需还原）
• 如果子表单含多个字段，建议封装一个 hideSubform(id) 函数统一处理
• 避免用 form.val('filter', {}) 批量赋空——它不会移除 lay-verify，下次提交照样校验

多级联动时怎么避免重复渲染和事件冲突

当 A 选项控制 B 区域，B 区域内又有下拉框控制 C 区域，容易出现：B 显隐后 C 的事件监听丢失、C 的值被重置、或多次调用 form.render() 导致卡顿。

关键是在每次显隐后，只对新暴露的子区域做最小范围重渲染，且确保事件监听器不重复绑定。

• 给每个子表单容器加唯一 class，如 subform-level-2，渲染时限定范围：form.render(null, 'subform-level-2')
• 监听器统一用事件委托挂载到父容器，而不是每次显示都重新 form.on()
• 用 layui.$(container).data('rendered', true) 标记是否已渲染过，避免重复执行
• 如果子表单含异步加载（如远程 select 选项），显隐时要 cancel 上一次请求，防止回调覆盖

子表单联动最易被忽略的点是：隐藏后未清理 lay-verify 属性，导致提交校验失败；以及子区域内的组件未单独 form.render()，造成样式或交互异常。这两处不处理，功能看似正常，一到提测就暴露。