如何在 Yup 异步验证中设置动态错误消息？

IT技术 reactjs formik yup
2021-05-21 17:07:16

我正在使用 Yup 的.test()方法在 Formik 中尝试异步验证，并且需要设置我从 API 获得的错误消息。根据后端的某些条件，错误消息会有所不同。

尝试了这里提到的几个解决方案
https://github.com/jquense/yup/issues/222和使用 Yup 和 Typescript 的动态验证消息

但是是的，抛出了test().

文档说

所有测试都必须提供名称、错误消息和必须返回 true 或 false 或 ValidationError 的验证函数。使测试异步返回一个可解决 true 或 false 或 ValidationError 的Promise。

我正在解决带有错误消息的新 ValidationError 但它仍然会引发默认错误。

这是代码。

const schema = Yup.object().shape({
  email: Yup.string().test(
    "email_async_validation",
    "Email Validation Error", // YUP always throws this error
    value => {
      return new Promise((resolve, reject) => {
        emailValidationApi(value)
          .then(res => {
            const { message } = res.data; // I want this error message to be shown in form.
            resolve(new Yup.ValidationError(message));
          })
          .catch(e => {
            console.log(e);
          });
      });
    }
  )
});
4个回答

我使用function语法而不是箭头函数来验证功能。

Doc 说：

测试函数是使用特殊的上下文或this值调用的，它公开了一些有用的元数据和函数。请注意，要使用this 上下文，测试函数必须是函数表达式(function test(value) {})，而不是箭头函数，因为箭头函数具有词法上下文。

这是工作代码。

const schema = Yup.object().shape({
  email: Yup.string()
    .email("Not a valid email")
    .required("Required")
    .test("email_async_validation", "Email Validation Error", function (value) { // Use function
      return emailValidationApi(value)
        .then((res) => {
          const message = res;
          console.log("API Response:", message);
          return this.createError({ message: message });
          // return Promise.resolve(this.createError({ message: message })); // This also works
        })
        .catch((e) => {
          console.log(e);
        });
    })
});

其实你几乎是对的。你只需要使用以下内容：

resolve(this.createError({ message: message }));

如果它仍然不起作用，请告诉我

不要传递第二个参数，因为我们通常将它作为错误消息传递，而是使用“createError”创建您自己的自定义消息并根据您的条件返回它。

import * as yup from "yup";

const InitiateRefundSchema = yup.object().shape({
  amountPaid: yup.number(),
  refundAmount: yup
    .number()
    .test("test-compare a few values", function (value) {
      let value1 = this.resolve(yup.ref("amountPaid"));
      let value2 = this.resolve(yup.ref("refundAmount"));
      if (value1 < value2) {
        return this.createError({
          message: `refund amount cannot be greater than paid amount '${value1}'`,
          path: "refundAmount", // Fieldname
        });
      } else return true;
    }),
})

我也可以用箭头函数来做到这一点。

const schema = Yup.object().shape({
 email: Yup.string()
  .email("Not a valid email")
  .required("Required")
  .test("email_async_validation", "Email Validation Error", (value, {createError}) { 
    return emailValidationApi(value)
      .then((res) => {
        const message = res;
        console.log("API Response:", message);
        return createError({ message: message });
      })
      .catch((e) => {
        console.log(e);
      });
    })
  });
其它你可能感兴趣的问题
上一篇打印机很困惑-字面意思是在空气中打印 下一篇独立的“T”指数值有什么作用？