“下一步”按钮必须用type="button"而非type="submit"，否则会绕过JS校验直接提交表单；切步时需动态移除非当前步字段的required属性或改用自定义校验；fieldset.disabled可禁用整组控件并保障无障碍；进度应存于sessionStorage，含步数和FormData序列化数据；切换步骤后须手动聚焦首个可编辑字段。
“下一步”按钮必须是 type="button"，不是 type="submit" —— 否则点一下就触发表单提交，所有步骤状态和校验逻辑全失效。
为什么不能用 type="submit"
浏览器对 type="submit" 有强行为：点击即触发 form.submit() 或表单内 submit 事件，根本不会等你的 JS 校验、切步或保存数据。哪怕你加了 event.preventDefault()，也容易漏掉（比如绑在父元素上没冒泡到）、或被其他库拦截。更麻烦的是，部分旧版 Safari 会无视 preventDefault 直接提交。
常见错误现象：
• 点“下一步”页面刷新或跳转
• 表单数据只发了第 1 步字段，后端收不到完整内容
• 控制台报错 Uncaught TypeError: Cannot read property 'checkValidity' of null（因为 form 已卸载）
实操建议：
• 所有中间步骤按钮统一写 <button type="button" onclick="goToStep(2)">下一步</button>
• 最后一步的提交按钮才用 type="submit"，且只在该 step 的 fieldset 内部
• 不要依赖 CSS 类名（如 .next-btn）来判断行为，type 属性才是浏览器执行逻辑的唯一依据
立即学习“前端免费学习笔记（深入）”；
如何动态控制 required 和校验范围
浏览器原生校验（checkValidity()、reportValidity()）会扫描整个 <form> 下所有带 required 的字段，不管它们是否显示或禁用。所以第 2 步的 <input name="cardNumber" required> 在第 1 步时也参与校验，导致点“下一步”直接失败。
实操建议：
• 切步前，先移除所有非当前步字段的 required 属性：document.querySelectorAll('input, select, textarea').forEach(el => { if (!el.closest('[data-step="' + nextStep + '"]')) el.removeAttribute('required'); });
• 更稳妥的做法：完全不用 required，改用自定义校验函数，例如：function validateStep(stepNum) { const fields = document.querySelectorAll('[data-step="' + stepNum + '"] input[required], [data-step="' + stepNum + '"] select[required]'); return Array.from(fields).every(f => f.value.trim() || !f.hasAttribute('required')); }
• 避免用 display: none 来“隐藏”字段——DOM 还在，校验照常发生；disabled 字段虽不提交，但 required 属性仍会被检查（Chrome 会忽略，Safari 不一定）
fieldset.disabled 是开关，不是装饰
用 fieldset.disabled = true 不只是为了视觉灰掉，它有两个不可替代的作用：
• 键盘 Tab 导航自动跳过整组控件，符合无障碍预期
• 所有子控件（包括 input、select、textarea）自动继承禁用状态，无需遍历设置
注意点：
• 必须给每个 fieldset 配 <legend>，否则语义断裂，屏幕阅读器无法识别上下文
• 不要用 form.elements 获取值——disabled 字段不会出现在其中；改用 new FormData(form)，它只收集未被 disabled 的字段
• Safari 对嵌套 fieldset 的 disabled 传递支持不稳定，所以所有步骤应为 <form> 的直系子元素，不要嵌套
sessionStorage 存什么、怎么存才不丢步
用户点浏览器后退键，默认会 reload 页面，JS 变量全清空。要保留进度，必须在每次切步前主动存两样东西：当前步数 和 当前所有字段值（包括隐藏步的，以防用户跳步修改）。
实操建议：
• 存步数：sessionStorage.setItem('formStep', String(nextStep))
• 存数据：sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(new FormData(form))))
• 页面加载时，先读：const savedStep = sessionStorage.getItem('formStep')，存在则立即调用 showStep(Number(savedStep)) 并用 FormData 还原字段值
• 敏感字段（如身份证号、银行卡号）别存 localStorage；sessionStorage 关闭标签页即清空，更安全
• 不要监听 popstate 模拟路由——多步表单不需要真实 URL 变化，强行加会让 history 栈混乱，反而破坏原生后退体验
最容易被忽略的其实是焦点管理：切换步骤后，必须把 focus() 主动移到当前 fieldset 内第一个可编辑字段（跳过 type="hidden" 或 disabled 的），否则键盘用户会卡在上一步末尾，根本不知道自己已进入新步骤。
