使用closest()精确定位当前步骤容器，再通过queryselectorall筛选其内部需校验字段，可实现按步校验；需排除disabled/hidden元素，逐项校验并聚焦首个无效项，全部通过才允许切换步骤。
在多步骤表单向导中，使用 closest() 定位当前步骤容器，再查找其内部所有需校验的输入框，是实现“按步校验”的简洁可靠方式。关键在于准确锚定当前步骤的 DOM 范围，避免跨步误判或漏检。
用 closest 精确定位当前步骤容器
每个步骤通常包裹在一个具有唯一标识（如 data-step="2" 或类名 step-active）的容器内。触发校验时（例如点击“下一步”），先从任一当前步骤内的元素（如按钮、输入框）向上查找最近的步骤容器：
const triggerBtn = event.target;
const currentStep = triggerBtn.closest('.step-container'); // 或 '.step[data-step="2"]'
确保该容器是所有本步输入框的**共同最近祖先**——这是后续 querySelectorAll 能正确限定范围的前提。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
在当前步骤内批量选取待校验输入框
拿到 currentStep 后，用 querySelectorAll 获取其内部所有需校验的字段。推荐统一标记必填/校验字段（如加 data-validate 或 required 属性）：
currentStep.querySelectorAll('input[required], select[required], textarea[required]')-
currentStep.querySelectorAll('[data-validate]')（更灵活，支持自定义规则） - 排除被禁用（
disabled）或隐藏（type="hidden"）字段，避免干扰：:not([disabled]):not([type="hidden"])
逐项校验并汇总结果
遍历上一步获取的节点列表，对每个输入执行校验逻辑（如检查是否为空、格式是否合法），同时收集错误信息或聚焦首个无效字段：
- 用
checkValidity()快速判断原生约束（需配合setCustomValidity自定义提示） - 手动校验时，读取
value.trim()判断空值，用正则验证邮箱、手机号等 - 发现首个无效项后可调用
input.focus()并滚动到可视区域：input.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 校验全部通过才允许切换步骤；否则阻止默认行为并提示用户
注意事项与常见坑
实际开发中需留意几点：
- 确保步骤容器层级清晰，避免
closest()找到父级步骤（比如多个.step-container嵌套）——建议用带数据属性的唯一选择器，如triggerBtn.closest('[data-step="3"]') - 动态渲染的步骤（如 Vue/React 中）需确保 DOM 已挂载完成再绑定事件，否则
closest可能返回null - 若使用 Shadow DOM，
closest默认不跨边界，需额外处理shadowRoot - 校验时机建议放在“下一步”按钮的
click事件中，而非输入框的blur——避免用户未填完就频繁报错
