如何利用数组 every 校验多步骤表单的实时完成状态-js教程-PHP中文网

用every校验多步骤表单的核心是将每步完成条件抽象为纯函数，动态截取已激活步骤的校验函数数组并统一判断是否全通过，配合数据响应实现轻量、可读、实时的状态反馈。

如何利用数组 every 校验多步骤表单的实时完成状态

用 every 校验多步骤表单的实时完成状态，核心是把每一步的完成条件抽象为一个布尔判断函数，再用 every 统一检查所有步骤是否都满足。它不关心具体字段名或校验逻辑，只关注“是否全部通过”，轻量、可读性强、响应及时。

每个步骤的完成状态应由一个纯函数决定，接收当前表单数据，返回 true 表示该步已完成（比如必填字段非空、格式合法、选项已选等）。

避免在函数里直接读取 DOM 或依赖副作用，保持可测试性
函数名建议体现语义，如 isStep1Valid、hasSelectedPlan
例如：
const isContactFilled = (data) => data.email && data.phone;
const hasAcceptedTerms = (data) => data.termsAccepted === true;

不是所有步骤始终参与校验——用户可能只走到第 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 状态、错误消息映射）