基于Yup与Formik的密码验证：错误绑定到不同变量的实现方法

你原来的思路是把每个验证规则拆成独立的字段（比如passwordMin、passwordLC），但这里有个核心问题：Formik的错误对象是和表单实际存在的输入字段绑定的，这些额外的字段并不对应任何输入框，所以Formik无法自动关联密码输入的验证结果到这些变量上，自然拿不到预期的错误信息。

下面给你两种实用的解决方案，按需选择：

方案1：利用Yup链式验证 + 错误消息映射（简单直接） #

先通过Yup的链式规则定义所有验证，然后在组件里根据错误消息的唯一性，把不同规则的失败映射到对应的变量上。

步骤1：定义Yup验证Schema #

import * as Yup from 'yup';

const validationSchema = Yup.object({
  password: Yup.string()
    .required("required_error") // 用唯一标识代替直接消息，方便后续判断
    .min(8, "min_length_error")
    .matches(/[a-z]/, "lowercase_error")
    .matches(/[A-Z]/, "uppercase_error")
});

步骤2：在Formik组件中拆分错误 #

import { useFormik } from 'formik';

function PasswordForm() {
  const formik = useFormik({
    initialValues: { password: '' },
    validationSchema,
    onSubmit: (values) => {
      console.log('提交的密码:', values.password);
    },
  });

  // 根据错误标识拆分到不同变量
  const passwordErrors = {
    required: formik.errors.password === "required_error",
    minLength: formik.errors.password === "min_length_error",
    hasLowercase: formik.errors.password === "lowercase_error",
    hasUppercase: formik.errors.password === "uppercase_error"
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="password"
        name="password"
        value={formik.values.password}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        className={formik.touched.password && formik.errors.password ? "invalid" : ""}
      />

      {/* 分别显示对应错误 */}
      {passwordErrors.required && <div className="error-text">请输入有效的密码</div>}
      {passwordErrors.minLength && <div className="error-text">密码长度至少为8位</div>}
      {passwordErrors.hasLowercase && <div className="error-text">密码必须包含小写字母</div>}
      {passwordErrors.hasUppercase && <div className="error-text">密码必须包含大写字母</div>}

      <button type="submit">提交</button>
    </form>
  );
}

这种方案的优点是写法简洁，完全复用Yup的验证能力，缺点是同一时间只会显示第一个失败的规则错误（因为Yup默认abortEarly: true，遇到第一个错误就停止验证）。

方案2：开启全量验证 + 自定义错误收集（支持同时显示所有错误） #

如果想要同时展示所有不符合的验证规则，需要开启Yup的abortEarly: false选项，让它返回所有失败的错误，再手动把这些错误分配到对应的变量中。

步骤1：定义Schema并开启全量验证 #

const passwordSchema = Yup.string()
  .required("请输入有效的密码")
  .min(8, "密码长度至少为8位")
  .matches(/[a-z]/, "密码必须包含小写字母")
  .matches(/[A-Z]/, "密码必须包含大写字母");

步骤2：在Formik的validate函数中手动收集错误 #

import { useFormik } from 'formik';

function PasswordForm() {
  const formik = useFormik({
    initialValues: { password: '' },
    // 自定义validate函数，手动处理Yup的全量错误
    validate: async (values) => {
      const errors = {};
      try {
        // 开启abortEarly: false，获取所有失败的验证错误
        await passwordSchema.validate(values.password, { abortEarly: false });
      } catch (err) {
        // 遍历所有错误消息，分配到对应字段
        err.errors.forEach((errorMsg) => {
          if (errorMsg.includes("请输入")) {
            errors.required = errorMsg;
          } else if (errorMsg.includes("长度至少")) {
            errors.minLength = errorMsg;
          } else if (errorMsg.includes("小写字母")) {
            errors.hasLowercase = errorMsg;
          } else if (errorMsg.includes("大写字母")) {
            errors.hasUppercase = errorMsg;
          }
        });
      }
      return errors;
    },
    onSubmit: (values) => {
      console.log('提交的密码:', values.password);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="password"
        name="password"
        value={formik.values.password}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />

      {/* 同时显示所有触发的错误 */}
      {formik.errors.required && <div className="error-text">{formik.errors.required}</div>}
      {formik.errors.minLength && <div className="error-text">{formik.errors.minLength}</div>}
      {formik.errors.hasLowercase && <div className="error-text">{formik.errors.hasLowercase}</div>}
      {formik.errors.hasUppercase && <div className="error-text">{formik.errors.hasUppercase}</div>}

      <button type="submit">提交</button>
    </form>
  );
}

这种方案的优点是可以同时展示所有不符合的规则，用户体验更好；缺点是需要手动处理错误映射，稍微繁琐一点。

额外提示 #

如果你不想手动判断错误消息，也可以给每个Yup的test方法设置自定义的错误键，不过实现起来和方案2类似，核心都是通过abortEarly: false获取全量错误后再拆分。

内容的提问来源于stack exchange，提问作者Strahinja Ajvaz