步骤条状态需与表单字段联动，通过统一的currentstep变量控制显隐、校验和提交逻辑；跳步时须校验已访问步骤，避免提交无效数据。
步骤条状态如何与表单字段联动
步骤条本身只是视觉指示器，真正起作用的是表单字段的显隐、校验和提交逻辑。不能只靠 CSS 切换 .active 或 .completed 类就认为流程跑通了——用户跳步、回退、未填完就点下一步，都会导致状态错乱。
推荐做法是用一个 currentStep 变量（比如 number 类型）统一控制：显示哪一屏、禁用/启用哪几个按钮、哪些字段参与校验。所有操作（点击步骤、点击“下一步”、“上一步”）都只修改这个变量，再由它驱动 DOM 更新和校验逻辑。
- 步骤条点击应仅触发
goToStep(n)，不直接修改字段值或提交 - “下一步”必须先调用
validateStep(currentStep)，校验通过才currentStep++ - 回退时清空后续步骤的字段值（否则用户再前进会带着脏数据）
怎么避免用户跳步后提交无效数据
常见错误是允许用户点击步骤条任意节点（比如从第 1 步直接点第 4 步），但第 2、3 步字段为空，最后却能提交成功。这不是体验问题，是数据完整性风险。
有两种处理策略，按业务选其一：
-
严格阻断：步骤条中未完成的后续节点加
pointer-events: none，且goToStep(n)内部判断n > currentStep + 1时直接 return - 宽松引导：允许跳转，但进入目标步骤时自动滚动到第一个未填字段，并聚焦 + 显示提示；提交时仍需全量校验所有已访问过的步骤
注意：无论哪种，submit 事件里不能只校验当前 currentStep，而要遍历所有 step 对应的字段。
移动端触摸区域太小导致步骤点击失败
很多实现把步骤条做成纯 CSS 圆点 + 连线，圆点本身只有 12px，手指点不准，尤其在 iOS Safari 上容易误触空白区域。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
解决方式不是加大圆点，而是扩大可点击热区：
- 给每个步骤项（
<li>或<button></button>）设置padding: 12px 20px，内部圆点用position: relative居中 - 步骤文字也包裹进点击容器，不要分开写
<span class="step-label"></span>和<span class="step-dot"></span> - 加
touch-action: manipulation避免 iOS 滚动延迟
实测：最小可点击区域建议 ≥ 44×44px，否则 WCAG 2.1 AA 级不达标。
表单重置时步骤状态没同步清理
用户填到第 3 步点了“重置”，如果只清空 input 值，currentStep 还是 3，步骤条仍显示第 3 步激活，下次开始会直接从第 3 步继续——这明显违背“重置”语义。
重置函数必须做三件事：
- 调用
form.reset()清空所有字段值 - 重置
currentStep = 1 - 手动触发一次步骤渲染（比如重新调用
renderSteps()或 dispatch 自定义事件）
特别注意：如果用了第三方校验库（如 validator.js），它的错误提示不会随 form.reset() 消失，得主动调用 clearErrors() 或删掉对应 .error-message 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
