如何在Yup验证中正确使用test方法实现自定义校验逻辑

核心问题分析 #

Yup的test方法规则是：返回true表示校验通过，返回false或抛出错误表示校验失败。你当前的validateCorrectAnswer函数返回逻辑完全相反：当输入与预期答案不同时返回true（会被判定为校验通过），输入正确时反而返回false（判定为失败），这和你的需求完全颠倒了。

修正方案 #

1. 调整校验函数的返回逻辑 #

把validateCorrectAnswer的返回值改为输入正确时返回true，错误时返回false，同时给test方法设置正确的错误提示语：

// 修正后的校验函数
const validateCorrectAnswer = (value = "", id) => {
  // 增加容错处理，避免找不到对应id时抛出错误
  const targetAnswer = correctAnswers.find((answer) => answer.id === id);
  if (!targetAnswer) return false;
  
  const expectedAnswer = targetAnswer.correctAnswer;
  // 输入正确时返回true（校验通过），错误返回false（校验失败）
  return value.trim() === expectedAnswer;
};

// 修正后的Yup校验规则
const validationSchema = Yup.object().shape({
  correctAnswers: Yup.array().of(
    Yup.object().shape({
      correctAnswer: Yup.string()
        .required("This field is required") // 先处理必填校验
        .test(
          "validate-correct-answer", // 校验名称（唯一即可）
          "wrong value", // 校验失败时的提示语
          (value, context) => validateCorrectAnswer(value, context.parent.id)
        )
    })
  )
});

2. 优化建议：直接在test方法内写逻辑（可选） #

如果不需要复用校验逻辑，可以把判断直接写在test回调里，让代码更紧凑：

const validationSchema = Yup.object().shape({
  correctAnswers: Yup.array().of(
    Yup.object().shape({
      correctAnswer: Yup.string()
        .required("This field is required")
        .test("validate-correct-answer", "wrong value", (value, context) => {
          const targetAnswer = correctAnswers.find(a => a.id === context.parent.id);
          if (!targetAnswer) return false;
          return value.trim() === targetAnswer.correctAnswer;
        })
    })
  )
});

其他实现思路 #

如果你的预期答案是静态已知的集合，可以用Yup的oneOf方法替代test，写法更简洁：

// 示例：针对固定预期值的场景
Yup.string().oneOf(["apple", "banana"], "wrong value")

但因为你的场景是根据动态id获取预期答案，test方法是更合适的选择。

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