多维表单应统一用单个form+fieldset分组，动态控制required、禁用非当前步fieldset，文件字段须保留在主form内，用sessionStorage持久化step和formData，提交前用FormData全量收集并后端统一校验。

多维表单不能靠多个

标签硬拆

浏览器不支持跨

提交，form.submit()只会发当前表单字段，其他表单的数据直接丢失。更麻烦的是，文件上传字段用input[type="file"].value取不到真实内容——它返回空字符串或已被禁用的本地路径，必须用files[0]拿到File对象。

常见错误现象包括：用户填完三步后点提交，后端只收到第 3 步的字段；上传控件看似选中了文件，但FormData.append('avatar', fileInput.value)实际塞进去的是空值。

• 所有字段保留在一个<form>内，用<fieldset>语义化分组
• 禁用非当前步的<fieldset disabled>，比display: none更可靠——既阻止交互，又让键盘 Tab 不跳入无效区域
• 文件字段也得放在主<form>里，哪怕它只在第 2 步才显示；否则files[0]在切换步骤后可能被清空或不可访问

分步验证必须动态控制required属性

required是全局校验，不管display还是visibility，只要字段在 DOM 里且带required，form.checkValidity()就会扫一遍。用户点“下一步”时，若第 3 步的邮箱字段也带required，校验直接失败，焦点还可能跳到隐藏字段上。

正确做法是切换步骤前，用 JS 批量开关required：

立即学习“前端免费学习笔记（深入）”；

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

document.querySelectorAll(`[data-step="${currentStep}"] [required]`).forEach(el => el.required = true);
document.querySelectorAll(`[data-step]:not([data-step="${currentStep}"]) [required]`).forEach(el => el.required = false);

• 别依赖checkValidity()全量扫描，它会误报未显示字段
• 校验失败时调用el.reportValidity()，触发原生提示并聚焦，兼容屏幕阅读器
• “下一步”按钮必须是type="button"，不是type="submit"，避免意外触发表单提交

状态持久化要存两样东西：step索引和formData对象

刷新页面后，File对象不可恢复，input.value全丢，仅靠 DOM 无法还原进度。sessionStorage 是唯一轻量可靠的方案，但它只存字符串，必须手动序列化。

容易忽略的点是：只存数据不存 step，会导致恢复后仍卡在第 1 步；只存 step 不存数据，用户得重填一遍。

• 每次切步前执行：sessionStorage.setItem('formStep', String(nextIndex)) 和 sessionStorage.setItem('formData', JSON.stringify(formData))
• 初始化时优先读取：const savedStep = sessionStorage.getItem('formStep')，存在则立刻跳转并Object.assign(form, JSON.parse(savedData))
• 敏感字段（如身份证号）绝不能进localStorage；sessionStorage关页即清，更安全
• 不要监听popstate模拟路由——多步表单不需要真实 URL 变更，加了反而让 history 栈混乱

提交前必须做跨步骤汇总校验，不能信前端传的step参数

后端如果按step=3只校验第 3 步字段，就等于放行了前面两步的脏数据。真正有效的做法是：前端一次性收集全部字段（包括隐藏的），后端按完整 schema 全量校验。

例如密码和确认密码不在同一步，但必须比对一致；地址字段在第 1 步填写，第 3 步才触发地理编码，这些逻辑都得在最终提交时统一跑。

• 用new FormData(form)手动聚合，再遍历entries()提取键值，比form.elements更稳妥
• 文件类字段需单独处理：formData.append('avatar', fileInput.files[0])，不能漏掉
• 后端收到的应是一个扁平化的字段集合，而不是带step前缀的嵌套结构；字段命名本身就要体现语义，比如user[email]、address[zip]

跨步骤状态同步和文件字段生命周期管理，是多数人写到第二步就开始出 bug 的地方。不是逻辑写得不够多，而是没意识到File对象和input.value根本不在同一个内存生命周期里。