Yup结合Formik如何获取密码字段多条件校验的独立状态

问题原因 #

Yup默认采用短路校验逻辑，链式调用的校验规则遇到首个不满足项时会直接终止执行、返回对应错误信息，无法直接输出所有密码规则的满足状态，不能支撑规则区域实时高亮的交互需求。

实现步骤 #

不要依赖Yup链式调用的错误返回驱动提示UI，将所有密码规则抽为可复用的独立判断逻辑，同时供给实时UI状态计算、表单提交校验两个场景，从根源上避免两套校验逻辑不一致的问题。

• 抽离统一维护的密码规则集

// 所有密码校验规则统一在此处维护，后续调整规则仅需修改这一处
const passwordRules = [
  { key: 'required', desc: '密码为必填项', validate: (val) => !!val?.trim() },
  { key: 'minLength', desc: '密码长度至少8位', validate: (val) => val?.length >= 8 },
  { key: 'uppercase', desc: '包含至少1个大写英文字母', validate: (val) => /[A-Z]+/.test(val) },
  { key: 'specialChar', desc: '包含至少1个特殊字符(@$!%*#?&)', validate: (val) => /[@$!%*#?&]+/.test(val) },
  { key: 'number', desc: '包含至少1个数字', validate: (val) => /\d+/.test(val) },
]

• 实时计算规则状态驱动UI高亮
  监听密码输入框的值变化，每次输入后遍历规则集，计算每个规则的实时通过状态，直接传给提示组件做样式判断即可：

// 以React场景为例，Vue、原生JS逻辑完全一致
const [password, setPassword] = useState('')
// 生成带通过状态的规则列表，直接用于UI渲染
const passwordRuleStatus = passwordRules.map(rule => ({
  ...rule,
  passed: rule.validate(password)
}))

渲染规则提示区域时，直接根据passed字段控制样式即可，比如满足规则时显示绿色+对勾图标，未满足时显示默认灰色或红色提示。
目标交互参考：

• 复用规则集整合Yup校验Schema
  表单提交时的校验逻辑直接复用已经抽离的规则集，不需要重复编写正则和判断逻辑，保证校验标准统一：

validationSchema: Yup.object({
  password: Yup.string().test('password-validation', function (value) {
    for (const rule of passwordRules) {
      if (!rule.validate(value)) {
        return this.createError({
          path: 'password',
          message: rule.desc
        })
      }
    }
    return true
  })
})

注意：如果搭配Formik等表单库使用，手动触发全量校验时需要传入abortEarly: false配置参数，关闭默认的短路校验逻辑，否则校验依然会在遇到第一个错误时终止，无法返回全量错误信息。

内容的提问来源于stack exchange，提问作者Dehn Hunsworth