用every校验多步骤表单的核心是将每步完成条件抽象为纯函数，动态截取已激活步骤的校验函数数组并统一判断是否全通过，配合数据响应实现轻量、可读、实时的状态反馈。
用 every 校验多步骤表单的实时完成状态，核心是把每一步的完成条件抽象为一个布尔判断函数，再用 every 统一检查所有步骤是否都满足。它不关心具体字段名或校验逻辑，只关注“是否全部通过”，轻量、可读性强、响应及时。
把每一步封装成独立的校验函数
每个步骤的完成状态应由一个纯函数决定，接收当前表单数据，返回 true 表示该步已完成（比如必填字段非空、格式合法、选项已选等）。
- 避免在函数里直接读取 DOM 或依赖副作用，保持可测试性
- 函数名建议体现语义，如
isStep1Valid、hasSelectedPlan - 例如：
const isContactFilled = (data) => data.email && data.phone;const hasAcceptedTerms = (data) => data.termsAccepted === true;
用 every 动态检查所有已激活步骤
不是所有步骤始终参与校验——用户可能只走到第 3 步，那只需检查前 3 步。因此，校验数组应随当前步骤动态生成：
- 维护一个步骤定义数组，如
steps = [isContactFilled, isAddressValid, hasChosenPlan] - 根据当前 activeStepIndex（从 0 开始），取前
activeStepIndex + 1个函数执行 - 调用：
const allStepsComplete = steps.slice(0, activeStepIndex + 1).every(fn => fn(formData));
配合状态更新实现“实时”反馈
每次表单字段变化（如输入、勾选、切换步骤），立即重新运行上述 every 判断，并更新按钮状态或 UI 提示：
- React 中可在
useEffect或自定义 Hook 里监听formData和activeStepIndex - Vue 中可用计算属性：
computed: { canNext() { return steps.slice(0, activeStepIndex + 1).every(fn => fn(formData)); } } - 注意防抖不必要：字段级校验本身轻量，无需节流；但若校验含异步（如用户名唯一性），需另作处理
处理“跳过”或“可选步骤”的灵活策略
有些步骤允许跳过（如“暂不填写推荐人”），此时不能简单删掉校验函数，而应让对应函数默认返回 true：
- 定义步骤时用配置对象替代裸函数：
{ validator: isReferrerValid, optional: true } - 校验时：
steps.slice(0, activeStepIndex + 1).every(({ validator, optional }) => optional || validator(formData)) - 这样既保留结构清晰，又支持业务扩展（如加 loading 状态、错误消息映射）
