表单拆分需以集中状态管理（如formData对象）为核心，统一通过updateField更新、localStorage持久化（配合beforeunload）、跨步骤校验，并用FormData手动聚合多表单数据，禁用formdata事件依赖。
表单拆分后如何保持数据一致性
拆分不是把一个 <form></form> 切成多个独立表单就完事——用户填到一半跳转，或上一步改了值，下一步没同步，数据就对不上。关键在状态管理，而不是 DOM 结构。
- 用 JavaScript 对象（比如
formData）集中存所有字段值，每个子表单只负责读写其中一部分键 - 避免直接操作
input.value后不更新状态对象；推荐统一走updateField(name, value)这类函数 - 如果用 localStorage 持久化中间状态，注意监听
beforeunload，但别在每次输入都写入——性能差，且容易写入脏值 - 跨步骤验证（比如“密码”和“确认密码”不在同一屏）必须在提交前汇总校验，不能只依赖单页的
checkValidity()
用 <fieldset></fieldset> + disabled 模拟分步，还是真路由跳转
两种方式适用场景完全不同：前者适合纯前端、无服务端状态依赖的轻量流程（如注册向导）；后者适合需服务端校验、权限控制或 SEO 的场景（如多步订单）。
-
<fieldset disabled></fieldset>仅视觉禁用，submit仍会收集所有字段——若想只提交当前步，得手动遍历document.querySelectorAll('fieldset:not([disabled]) input') - 真路由跳转（如
history.pushState或框架的useNavigate）要处理好浏览器前进/后退按钮，否则input值会丢失（除非你主动 restore） - 服务端渲染（SSR）项目慎用纯前端分步，因为首屏可能只渲染第一步，但搜索引擎爬虫看不到后续内容
提交时如何合并多个 <form></form> 的数据
浏览器原生不支持跨 <form></form> 提交。强行用 FormData 手动聚合是唯一可靠路径，但要注意字段名冲突和文件上传限制。
- 不要依赖
form.submit()多次调用——后一次会覆盖前一次的请求体 - 用
new FormData()初始化，再逐个append()字段：formData.append('user[email]', emailInput.value) - 文件
<input type="file">必须用files[0]获取真实 File 对象，不能用.value（那是路径字符串，且现代浏览器已禁用） - 如果某字段在多个子表单中重复出现（如
utm_source），得明确以最后一步为准，或抛出冲突警告
为什么 formdata 事件不能替代手动收集
formdata 事件只触发于原生 <form></form> 元素，且只包含该表单内可提交的控件。它无法感知其他 DOM 区域里的输入框，更不会自动合并跨表单数据。
立即学习“前端免费学习笔记（深入）”；
- 监听
form.addEventListener('formdata', ...)对拆分后的非主表单完全无效 - 即使你在每个子表单上都加了该事件，也无法知道“现在该提交哪几步”，事件本身不带上下文标识
- 它不解决异步加载字段（如动态插入的
select）的问题——那些控件在事件触发时可能还没挂载到 DOM - 真正省事的方式反而是放弃事件驱动，改用显式调用
serializeStep(2)这类函数，逻辑更可控
