layui怎么实现表单分步骤填写-Layui教程-PHP中文网

layui分步骤表单核心是手动控制显隐、分步校验与状态管理；需用独立步骤容器、动态校验当前字段、form.render()重绘组件、全局对象缓存数据并单独处理laydate/layedit等特殊组件。

layui怎么实现表单分步骤填写

layui 本身不提供原生的多步骤表单组件，layui.form 默认只处理单页表单渲染和校验。要实现分步骤填写，本质是手动控制表单项的显隐 + 分步校验 + 状态管理，而不是依赖某个内置函数。

关键判断：别找 layui.stepForm 或类似不存在的模块——你得自己组织 DOM 结构、切换显示、接管提交逻辑。

form.verify 可以复用，但必须按当前步骤的字段动态触发，不能全局一次性校验。常见错误是点击“下一步”时直接调用 form.verify()，结果校验了所有字段（包括未显示的），导致误报。

每个步骤容器用独立 class 区分，比如 step-1、step-2
“下一步”按钮绑定 click 事件，先提取当前步骤内所有 required 字段的 name
调用 form.verify() 前，临时修改 form.config.verify 的触发范围（不推荐），更稳妥的是用 form.val('formFilter') 获取当前步骤字段值，再手动遍历校验规则
示例：对 username 和 email 做必填检查，就只取这两个字段的值，调用自定义校验函数，而非依赖 form.on('submit') 全局触发

注意：form.render() 不影响校验逻辑，但若步骤间有开关类组件（如 checkbox、select），切换时需调用 form.render('checkbox') 或 form.render('select') 重绘，否则状态不同步。

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

下载

最易踩坑的是把所有表单项写在一个 form 标签里，然后用 display: none 切换——这会导致 layui 的自动绑定失效（比如 switch、radio 的渲染错乱，或 form.on('switch') 监听丢失）。

每个步骤用独立 div 包裹，且都放在同一个 form 内（保持 submit 语义）
切换时用 addClass('layui-hide') / removeClass('layui-hide')，而非 hide() 或内联 style
所有表单元素（input、select、textarea）必须在 DOM 加载完成后再由 form.render() 初始化一次；若某步骤是后续动态插入的（比如异步加载），必须在插入后立即调用 form.render()
避免在步骤容器上直接写 lay-submit，整个表单只有一个提交入口，步骤按钮统一用普通 button，靠 JS 控制流程

layui 不维护表单状态，全靠你自己存。常见做法是用一个全局对象缓存各步骤数据：

初始化时定义 var stepData = {}
每次“下一步”前，调用 form.val('formFilter') 获取当前步骤字段，合并进 stepData 对应 key（如 stepData.step1 = {username: 'a', email: 'b'}）
“上一步”时，从 stepData 中取出对应字段，用 form.val('formFilter', data) 回填
注意：回填后必须再调用 form.render()，否则 switch、radio 等组件不会同步 UI 状态