原生HTML+JS分步表单需用JS控制各step显隐、动态开关required属性、手动验证；每步独立div，仅显示当前步；保存step索引与数据至sessionStorage以支持后退；移动端注意z-index和触摸事件。
怎么用原生 HTML + JavaScript 实现分步骤表单
纯 HTML 本身不支持“多步”逻辑，form 是单页提交容器，分步必须靠 JavaScript 控制显隐和状态。核心思路是：把每步封装成 section 或 div，只显示当前 step，用 JS 切换 display 或 class，并手动管理 disabled 和验证。
常见错误是直接给每个 input 加 required 后全表单提交——这会导致未显示的步骤也被校验，报错或跳过验证。必须动态开关 required 属性，或改用 JS 手动检查。
- 每步用独立
div包裹，初始仅第 1 步style="display: block"，其余display: none - “下一步”按钮绑定点击事件，先调用
validateStep(currentStep)，通过才hide(current)+show(next) - 最后一步的“提交”应调用
form.submit()，而非继续切步 - 别忘了加进度条或 step indicator，用
data-step控制样式更稳妥
Vue/React 里怎么避免重复写验证逻辑
框架里分步本质是组件状态切换，关键不是 DOM 显隐，而是验证逻辑复用。不要为每步写独立的 if (step1Valid && step2Valid...)，容易漏判、难调试。
推荐把每步验证抽成函数，返回 { valid: boolean, errors: string[] } 结构，统一收集：
立即学习“前端免费学习笔记（深入）”；
- Vue 中用
computed或ref存各步结果，next按钮禁用取决于currentStepErrors.length === 0 - React 中用
useReducer管理 step 和 errors，避免多个useState同步问题 - 所有验证函数接收当前 step 的 form data 对象，不依赖 DOM 查询（比如不用
document.getElementById） - 日期、手机号等格式验证建议复用
new Intl.DateTimeFormat()或正则常量，别硬编码在组件里
用户点浏览器后退键时，表单状态怎么不丢
原生浏览器后退会重载页面，导致所有 JS 状态清空。要保留，必须主动存取 sessionStorage 或 localStorage，且不能只存数据，还要存当前 step 索引。
- 每次切步前，执行
sessionStorage.setItem('formStep', String(nextIndex))和sessionStorage.setItem('formData', JSON.stringify(data)) - 页面加载时，在初始化逻辑最前读取：
const saved = sessionStorage.getItem('formStep')，存在则跳转到对应 step 并恢复数据 - 注意：敏感字段（如身份证号）别存
localStorage，sessionStorage关闭标签页即清空，更安全 - 别监听
popstate做路由跳转——多步表单通常不配真实路由，强行加反而让 history 栈混乱
移动端上“上一步”按钮点不了怎么办
不是代码问题，是触摸事件穿透或 z-index 遮挡。常见于用了 position: fixed 的 footer 导航栏，或弹窗蒙层没关掉。
- 检查“上一步”按钮是否被其他元素覆盖：用 Chrome DevTools 的
inspect选中按钮，看 computed styles 里z-index是否足够高 - 确认没意外触发
pointer-events: none（比如父级加了 loading mask 但忘记移除） - iOS Safari 有时对
button的touchstart响应延迟，可加cursor: pointer和-webkit-tap-highlight-color: transparent - 真机测试比模拟器可靠；用
console.log打点验证事件是否触发，别只信视觉反馈
分步表单最难的不是切换动画，而是验证时机和状态同步——用户中途关闭页面再回来，或连点两次“下一步”，都可能让 stepIndex 和实际 DOM 不一致。建议每步切换后加一行 console.assert(stepIndex === getCurrentVisibleStep(), 'step mismatch')，上线前删掉。
