HTML中构建多步骤表单向导的分步流程与进度可视化

需特别注意：所有步骤必须保留在DOM结构中，避免使用v-if等销毁式渲染方式，否则回退时将丢失已填写数据。常见误区是误用visibility: hidden，该属性仍会占据布局空间且无法阻止表单提交。

1. 为每个步骤容器设置唯一id，如step-1、step-2
2. 使用全局变量（如currentStep = 1）跟踪状态，而非依赖DOM类名切换
3. 通过统一函数更新currentStep并触发重绘，避免按钮直接操作样式

用CSS Grid实现响应式进度条，不依赖JavaScript计算宽度

进度条需要精确反映完成进度，硬编码宽度值存在维护风险。推荐使用CSS Grid的列轨道自动分配功能，实现响应式布局。

.progress-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3步就写3，4步就写4 */
  gap: 8px;
}
.progress-step {
  height: 6px;
  background: #e0e0e0;
}
.progress-step.active {
  background: #2196f3;
}
.progress-step.completed {
  background: #4caf50;
}

该方法只需修改repeat()参数即可适应步骤增减，无需调整JS逻辑。注意避免使用flex+calc()组合，在移动端可能出现1像素偏差。

表单验证失败时如何阻止步骤切换

当用户未完成必填字段就点击下一步时，需要提供有效的验证反馈而非简单弹窗。关键是在click事件中同步执行验证逻辑。

1. 使用querySelectorAll('input[required]')批量检查字段的.checkValidity()
2. 发现无效字段时调用.reportValidity()触发原生提示，并返回false阻止步骤切换
3. 避免使用event.preventDefault()自定义提示，以免影响屏幕阅读器兼容性
4. 推荐禁用下一步按钮直到当前步骤验证通过，提升用户体验

为什么不能用

标签包裹全部步骤

全局包裹

推荐方案是每个步骤使用独立

对于输入状态的保存，建议input事件实时存储到内存对象，而非依赖初始值属性。例如：formData['step2']['email'] = e.target.value。

通过以上方法，可以构建出功能完善、用户体验良好的多步骤表单系统。