红点仅显示已访问且存在未清除自定义错误的步骤：每步校验结果存入结构化状态对象并同步至sessionStorage，步骤条根据errors.length>0及访问标记动态渲染红点，用户修正后即时清除对应错误与样式。
在多步骤注册向导中，用步骤条上的红点标记“存在自定义校验错误的步骤”，关键不是单纯记录“哪步没过”，而是把每步的校验状态（尤其是前端自定义规则失败）与步骤 ID 显式绑定，并在 DOM 渲染时实时反映。sessionStorage 只负责持久化“用户走到哪”和“哪步已提交过”，真正驱动红点显示的是当前各步骤表单字段的 validity 状态 + 自定义错误标记。
1. 每步独立校验，结果存入结构化状态对象
不要等最后一步才汇总错误。在每步的表单区域（如 step2-form）内，监听 input/blur 事件，对关键字段执行校验逻辑，并将结果写入一个统一的状态对象：
- 定义状态结构：例如
{step1: {valid: true, errors: []}, step2: {valid: false, errors: ["密码长度不足", "两次输入不一致"]}, step3: {valid: true, errors: []}} - 校验触发点：用户离开密码框、点击“下一步”前、或提交本步表单后
- 写入 sessionStorage：每次更新后，用
sessionStorage.setItem('onboarding_progress', JSON.stringify(progress))保存整份状态（加 try/catch）
2. 步骤条渲染时读取并判断红点逻辑
步骤条本身是静态 UI 元素（如 ），它的红点是否显示，取决于对应步骤的 errors.length > 0，而不是仅看 valid === false：
- DOM 加载完成后，先读取
sessionStorage.getItem('onboarding_progress') - 解析为对象，遍历每个 step key，检查
progress[stepId]?.errors?.length > 0 - 匹配到步骤条元素，添加类名
has-error或直接设置style.setProperty('--show-dot', '1') - CSS 中用
.step-item.has-error::after渲染红点，避免 JS 操控样式
3. 红点只对“已交互且出错”的步骤生效
防止用户刚进向导就看到满屏红点——这会制造焦虑。红点应满足两个条件才显示：
- 该步骤已被用户访问过（比如
sessionStorage.getItem('onboarding_visited_step2') === 'true'） - 该步骤当前存在未清除的自定义错误（
errors.length > 0） - 注意：原生 required 或 type="email" 的错误，可通过
input.validity.valid === false && input.checkValidity() === false判断；自定义规则（如密码强度）则必须靠你手动 push 到 errors 数组里
4. 用户修正后及时清除红点
红点不是一次性的，要随用户操作动态响应：
- 当用户在某字段重新输入并校验通过时，从对应 step 的 errors 数组中移除该错误项
- 若 errors 变为空数组，立即将新状态写回 sessionStorage
- 同时触发步骤条重绘：查找
[data-step="step2"].has-error，移除has-error类 - 不要依赖刷新页面来清空红点，所有状态更新都应在内存中完成并同步到 storage
