多步骤表单需以单个form容器为核心，结合javascript状态管理与持久化策略（如带flowid前缀的localstorage），并通过fieldset+disabled控制可见性与提交范围，最终由后端全量校验确保数据一致性。
多步骤表单不是“把大表单切成几页”，而是用一个 form 容器 + JavaScript 状态管理 + 持久化策略协同工作的结果。DOM 结构切分只是表象，数据流断裂才是刷新后丢数据的根源。
为什么 new FormData(form) 会漏掉上一步的字段
FormData 只读取当前 DOM 中「存在且可提交」的元素：disabled、display: none、未渲染的 input 全部被跳过。哪怕 URL 里带着 ?email=test@example.com，只要页面没生成对应 <input name="email" type="hidden">，它就进不了提交体。
- 常见错误：用
visibility: hidden或opacity: 0隐藏上一步字段——它们仍在 DOM 中，但浏览器认为不可交互，FormData仍会采集（不推荐，易误操作） - 正确做法：每步加载时，从
new URL(window.location.href).searchParams解析参数，动态插入type="hidden"字段到form内部 - 必须先清理旧 hidden 字段：重复插入会导致同名字段多次提交，后端收到数组而非字符串
用 localStorage 存表单状态时怎么避免覆盖冲突
直接用固定 key 如 localStorage.setItem('form', JSON.stringify(data)) 是危险的——多个用户、多个流程、甚至同一用户开两个 tab，都会互相覆盖。
- 推荐前缀方案：从初始 URL 提取
flowId（如?flow=reg-20260630-a1b2），或用sessionStorage.getItem('formSessionId')生成唯一标识 - 写入时机：仅在用户主动点击「下一步」或「保存草稿」时调用
localStorage.setItem('form_' + flowId, ...)，不要监听input实时存（性能差、易存脏值） - 读取时机：页面加载后立即尝试恢复，但需校验数据结构是否匹配当前表单字段，防止旧格式污染新版本
fieldset + disabled 比 display:none 更适合分步控制
用 display: none 隐藏非当前步字段看似简单，但会破坏键盘导航顺序、让屏幕阅读器无法感知步骤结构，且 disabled 字段不会被 FormData 收集——这正是你想要的：只提交当前步可见字段，同时禁用其他步输入。
- 每个步骤用一个
fieldset包裹，配legend（不能省略，否则语义失效） - 非当前步的
fieldset加disabled属性，而不是隐藏整个容器 - 切换步骤时，给当前
fieldset添加aria-current="step"，并用.focus()聚焦第一个可编辑input（跳过type="hidden"或disabled的） - 别用
form.checkValidity()全局校验——它会扫所有fieldset，包括disabled的，导致误报
提交前如何合并跨步骤的验证与数据
前端分步只是体验优化，后端必须接收完整数据并一次性校验。这意味着：所有字段必须存在于同一个 form 中（哪怕视觉上分开了），且「确认密码」「手机号二次验证」这类跨步依赖字段，要在最终提交前做汇总检查。
- 用 JS 对象集中管理所有字段值，例如
const formData = { email: '', password: '', confirm: '' }，所有输入都通过updateField(name, value)同步更新 - 跨步校验逻辑写在提交事件里，而不是某一步的「下一步」按钮中；比如
if (formData.password !== formData.confirm)就报错 - 文件上传字段必须用
input.files[0]获取真实File对象，不能用.value（现代浏览器已禁用路径字符串） - 最终提交不用
form.submit()，改用fetch手动构造FormData并append()所有字段，确保可控
最常被忽略的是：URL 参数和 localStorage 都只是状态传递/暂存手段，它们不解决「用户手动修改 URL 后数据不一致」的问题。真正可靠的边界在后端——所有字段必须一次提交、全量校验、拒绝任何 step 参数驱动的分步处理逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
