多步表单切换前需同步校验当前步骤字段：点击“下一步”时，用querySelectorAll获取当前步骤必填/规则字段，调用checkValidity()或自定义验证，任一失败则聚焦首个错误项并阻止跳转；可复用reportValidity()简化原生校验，结合data-validate扩展自定义及异步逻辑，注意动态字段绑定与实时状态管理。
在多步表单中，切换步骤前校验当前步骤的表单，关键是在用户点击“下一步”（或“上一步”）时，**同步触发当前步骤内所有必填/规则字段的校验**，并阻止非法状态下的步骤跳转。
绑定按钮点击事件并手动触发校验
不要依赖浏览器原生的 submit 事件（因为整页没提交），而应在“下一步”按钮的 click 事件中主动校验当前可见步骤的字段：
- 用
querySelectorAll获取当前步骤容器内所有带校验规则的输入项（如input[required]、input[data-rule="email"]） - 逐个调用
.checkValidity()，或手动执行自定义规则（如正则匹配、长度判断） - 任一字段不通过，就聚焦第一个错误项、显示提示，并
return false阻止切换
利用 HTML5 表单验证 API 简化基础校验
如果只做必填、邮箱、URL 等原生支持的校验，可直接复用浏览器能力：
- 确保每个输入有正确 type（
type="email"）和属性（required、minlength） - 对当前步骤的
<form>或字段组调用reportValidity()—— 它会自动高亮错误、显示默认提示，且返回布尔值 - 代码示例：
if (!currentStep.querySelector('form').reportValidity()) return;
结合自定义校验逻辑与实时反馈
原生校验不够时（如确认密码、手机号格式、远程唯一性检查），需扩展：
立即学习“Java免费学习笔记（深入）”；
- 为每个字段添加
data-validate属性标识规则类型 - 在切换前遍历字段，按规则执行函数（如
validateEmail(val)、validatePasswordMatch()） - 异步校验（如用户名是否已存在）要加 loading 状态，并用
await等待结果，失败时统一提示 - 校验后动态添加
error类或data-invalid属性，配合 CSS 显示红框/图标
避免常见陷阱
校验逻辑容易出错的地方：
- 只校验
value却忽略用户清空后未失焦——建议监听input+blur实时标记状态，切换时只汇总判断 - “上一步”也执行校验？通常不需要，但若业务要求（如防止用户跳过修改），同样处理
- 动态渲染的字段（如新增联系人）需在插入 DOM 后绑定校验逻辑，或切换时重新查询
- 不要用
preventDefault()阻止按钮默认行为，而是用return false或条件控制流程
