电子商务结算页面应采用单表单多字段集结构，用fieldset+legend语义化分步，禁用非当前步并动态启用，progress元素展示进度，切换时同步焦点与aria-current，后端校验全量字段。
电子商务结算页面分步骤规划表单结构，核心是把用户从“确认订单”到“支付完成”的路径拆解为逻辑清晰、可验证、无障碍友好的若干环节，同时确保数据完整性与操作安全性。
用 fieldset + legend 划分语义化步骤
每个步骤应包裹在一个 fieldset 内，用 legend 标明当前阶段标题（如“收货信息”“支付方式”“确认订单”）。整个结算流程只用一个 <form></form>，所有 fieldset 是其直接子元素。
- 避免为每步单独套
form，否则提交时仅发送当前步字段，后端无法做全局校验 - 禁用非当前步的
fieldset（设disabled属性），防止跳过验证；但需配合 JS 动态启用/禁用，否则 disabled 字段值不会被提交 - 屏幕阅读器会自动读出 “步骤 2：支付方式”，提升无障碍体验
进度条用原生 progress 元素实现
使用 <progress value="2" max="4"></progress> 表达当前所处步骤，比 CSS 模拟更轻量、语义明确、读屏友好。
- 务必设置
max属性，否则默认为 1，进度永远满格 - JS 更新
value时需做边界检查（如不能小于 1 或大于 max） - 若需在进度条上显示文字（如“第2步/4步”），Safari 中建议 fallback 到
div+aria-valuenow/aria-valuemax
切换步骤时同步更新焦点与状态
仅靠 CSS 显示/隐藏不够。每次切换，必须：
- 给当前
fieldset添加aria-current="step" - 将键盘焦点移到该步第一个可聚焦的输入项（
input、select等），用element.focus()实现 - 若首个字段不可聚焦（如
type="hidden"或disabled），需主动查找下一个有效字段 - 切换前调用
checkValidity()保存本步验证状态，避免点“下一步”时突然弹出多个错误提示
后端不依赖 step 参数，统一接收并校验全量字段
前端传的 step=3 不可信。所有字段应在一次 POST 中完整提交，后端按完整订单 schema 校验。
- 防止绕过前端步骤逻辑（例如直接构造请求提交第 3 步字段却缺失第 1 步的收货人姓名）
- 真正需要分步处理的场景（如上传凭证后生成支付 token），应由后端返回下一步所需参数，而非前端控制流程
- 支付确认页需清空原表单监听器、调用
replaceState替换 history 条目，避免后退复原脏数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
