关键是要主动控制校验范围：非提交按钮必须设 type="button"；校验仅针对当前步骤可见可交互字段；required 属性需动态开关；切换步骤前须清空上一步自定义校验状态。
多步骤长表单的分页切换中，对当前步骤做独立校验，关键不是“让浏览器只看这一页”，而是主动控制校验范围——跳过隐藏/禁用字段，只触发当前可见、可交互控件的原生验证逻辑。
按钮类型必须显式设为 type="button"
这是最容易被忽略却最致命的一环。所有非最终提交的按钮（如“下一步”“上一步”）如果没写 type 属性，浏览器默认当 type="submit" 处理。一旦点击，就会触发表单全局校验，未展开的步骤里带 required 的字段立刻报错。
- 错误写法：
<button onclick="goToStep(2)">下一步</button> - 正确写法：
<button type="button" onclick="goToStep(2)">下一步</button> - 最终提交按钮保留
type="submit"即可，它本该校验全部字段
校验函数只遍历当前步骤的可见字段
别调用 form.reportValidity()，它会扫描整个 form，且对 display: none 或 hidden 字段不显示提示。应手动筛选出当前步骤中真正需要校验的元素：
- 用
document.querySelectorAll('[data-step="2"] :is(input, select, textarea)')精准获取第 2 步所有基础控件 - 过滤掉 disabled 或不可见的字段：
el.offsetParent !== null && !el.disabled - 对每个符合条件的字段单独调用
el.checkValidity()；失败时立即调用el.reportValidity()弹出提示 - 校验通过后，聚焦第一个无效字段，方便键盘用户快速修正
required 属性不能静态写死，要动态开关
HTML 的 required 是全局属性，不会识别“当前步”。如果所有步骤字段都加了 required，用户点第一步“下一步”时，第二步的邮箱框就提前报错。
- 切到第 n 步前，给
[data-step="n"] [required]批量加上 required 属性 - 同时移除其他所有步骤中元素的 required 属性（
el.removeAttribute('required')） - 或者更彻底：全表单都不用 required，完全由 JS 校验逻辑控制——比如空值检查 + type="email" 格式判断 + 密码一致性比对
切换步骤前重置上一步的自定义校验状态
如果某字段曾调用过 setCustomValidity('格式错误')，之后没清空，它的 validity.valid 会一直为 false。即使该字段已隐藏，后续 form.checkValidity() 仍可能返回 false，导致流程卡住。
- 每步切换前，遍历上一步所有字段，执行
el.setCustomValidity('') - 同步移除
invalid类或自定义错误样式类，避免视觉残留 - 确保隐藏字段（如用 hidden 属性）仍参与 JS 校验逻辑；若用 display: none，则 JS 中必须跳过它们
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
