多步向导表单需用 javascript 实现数据暂存与提交：统一在单个 form 内用 fieldset 划分步骤，name 属性标识字段，localstorage 按唯一 key 断点续传，切换前动态校验可见字段，最终拦截 submit 用 formdata 组装并 fetch 提交。
多步向导表单不能靠纯 HTML 实现数据暂存和最终提交——必须用 JavaScript 控制步骤流转、校验逻辑、中间数据保存与最终组装。核心不是“怎么写 HTML”，而是“怎么让每一步的数据不丢、不乱、不重复提交”。
统一表单结构，避免数据割裂
所有步骤字段必须保留在同一个 <form></form> 标签下，不要拆成多个 form。否则每步提交都会独立发请求，数据无法聚合，也无法做跨步校验（比如第二步要用第一步填的邮箱发验证码）。
- 用
<fieldset></fieldset>+<legend></legend>包裹每步内容，语义清晰且支持批量禁用：fieldset.disabled = true可一键锁定非当前步 - 所有 input、select、textarea 都要有
name属性，这是最终提交时识别字段的关键 - 隐藏非当前步的区域用
display: none或 CSS class 控制，但别移除 DOM——值还在，取起来才可靠
每步自动暂存，用 localStorage 做断点续传
用户刷新页面或意外关闭后还能接着填，关键靠 localStorage 按步骤名存取 JSON 数据。重点不是“存”，而是“存得准、读得稳、清得干净”。
- 为每步生成唯一 key，例如
order-reg-step2-uid123（业务标识 + 步骤 + 用户 ID），避免不同用户/流程互相覆盖 - 监听
input或blur事件，实时收集当前步所有字段值，构造成对象后JSON.stringify()存入 localStorage - 页面加载时检查对应 key，
JSON.parse()后逐个赋值到表单控件；加try/catch和空值判断，防止解析失败或 undefined 赋值报错 - 最终提交成功（收到 200 响应）后，立刻
removeItem()清掉所有相关 key，避免旧数据残留干扰下次填写
切换步骤前验证，动态控制 required
不能全局设 required，否则隐藏步骤的字段也会被浏览器强制校验。必须在点击“下一步”时，只校验当前可见步骤的必填项。
- 切换前调用自定义校验函数，遍历当前
fieldset内所有[required]元素，检查.value或.checked - 通过 JS 动态开关
required属性：进入某步时设el.required = true，离开时设false - 对 checkbox/radio 等特殊控件，校验逻辑要单独处理（比如至少选一个、单选必须有值）
- 校验失败时聚焦第一个错误字段，并给出明确提示，不要直接跳步
最终提交：组装数据，不依赖原生 submit
最后一点击“提交”，不是让 form 自己发请求，而是拦截默认行为，用 fetch 或 XMLHttpRequest 手动发送完整数据包。
- 给 form 绑定
submit事件，开头就event.preventDefault()，否则整页刷新或跳转 - 用
new FormData(form)自动收集所有带 name 的字段值（包括文件），它比手动拼对象更可靠 - 如果后端需要 JSON 格式，可先
Object.fromEntries(new FormData(form))转对象，再JSON.stringify()发送 - 提交成功后重置 localStorage、清空表单、跳转成功页或显示提示；失败则保留当前步骤和已填数据，方便用户修正
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
