必须调用 event.preventDefault() 阻止默认提交，中间步骤用 type="button" 按钮并保存 formData 对象，仅校验当前步骤字段，通过 history.pushState 同步 URL 并监听 popstate 恢复状态。
怎么用 form 标签分步但不刷新页面
浏览器原生 form 提交默认整页刷新，做多步骤表单必须拦截默认行为。核心不是“怎么分步”，而是“怎么让每一步的提交不跳转”。event.preventDefault() 是绕不开的第一步，漏掉它，所有步骤逻辑都会白写。
常见错误现象：submit 事件一触发就跳转到空白页或 404；点击“下一步”按钮没反应——其实是被默认提交吞掉了。
- 所有步骤按钮必须放在
form内，但只在最后一步才允许真实提交（即不调preventDefault()） - 中间步骤用
type="button"更安全，避免误触发submit事件 - 用
data-step属性标记当前步骤，比用 class 或 index 更易维护
怎么保存上一步的输入数据不丢失
用户填完第一页点“下一步”，第二页展开时，第一页的 input 值不能清空、也不能靠 DOM 重新取——DOM 可能已被隐藏或移除。得在切换前把值存起来，切换后按需还原。
使用场景：邮箱验证页要复用注册页填的 email；地址页要带出用户选择的省市区。
立即学习“前端免费学习笔记（深入）”；
- 推荐用一个纯对象（如
formData）集中存所有字段，键名和name属性对齐 - 不要依赖
form.elements实时读取，隐藏的input在某些浏览器中会返回undefined - 如果用了
required属性，切换步骤时别删掉 DOM，用display: none或aria-hidden控制可见性
怎么校验当前步骤再进下一页
前端校验不是锦上添花，是防止用户白填三页最后卡在第四步报错。重点不是“全字段一起校验”，而是“只校验当前可见步骤里的必填项和格式”。
容易踩的坑：用 form.checkValidity() ——它会校验整个 form 下所有 input，包括已隐藏的，结果永远返回 false。
- 只遍历当前步骤容器内的
querySelectorAll('input[required], input[type="email"]') - 对每个字段手动调
checkValidity()，失败就focus()第一个错误项 - 避免用正则硬校邮箱：
type="email"浏览器自带基础校验，够用且兼容性好
怎么处理后退按钮和 URL 同步
用户点浏览器后退键，页面不会自动回到上一步——因为没改 URL。不处理的话，用户刷新页面会直接丢失进度，分享链接也无效。
性能影响小，但兼容性要注意：history.pushState() 在 IE11 及以下不可用；hashchange 是更老但更稳的备选。
- 每次切换步骤，用
pushState({ step: 2 }, '', '?step=2')更新 URL - 监听
popstate事件，在用户点后退/前进时恢复对应步骤和数据 - 初始化时读
location.search或location.hash，决定首次展示哪步，而不是总从第一步开始
最麻烦的其实是“部分填写后关闭标签页再打开”——这得配合 sessionStorage 持久化，但别存太大的对象，Chrome 对单个 key 有约 5MB 限制，且隐私模式可能禁用。
