Question

就我而言，我有一个yup模式表单验证。例如：

const form = yup.object().shape({
firstName: yup.string().nullable().required(),
lastName: yup.string().nullable().required(),
country: yup.string().nullable().required()
    .test('validator', 'country is incorrect', value => {
        return new Promise((resolve, reject) => {
            api.post('url', value)
            .then(() => 
                  resolve(false))
            .catch(() => 
                  resolve(true)
        })
    }
});

此外，我想异步验证国家/地区字段。

流应为以下内容：

应该运行同步验证
如果没有同步验证错误
运行异步验证
如果没有异步验证表单应该有效

我遇到的问题：

我尝试使用yup中的.test（），但验证程序的顺序错误。

例如，在这种情况下，我要执行所需的验证程序，并且仅在成功通过且没有错误的情况下，然后运行.test（）（异步验证）。

如何使用Formik和Yup实现这种行为？

Answer 1

这是如何实现的：

const form = yup.object().shape({
  firstName: yup.string().nullable().required(),
  lastName: yup.string().nullable().required(),
  country: yup.string().nullable().required()
    .test('validator', 'country is incorrect', value => {
      if (!_.isEmpty(value)) {
        const isDuplicateExists = await checkDuplicate(value);
        console.log("isDuplicateExists = ", isDuplicateExists);
        return !isDuplicateExists;
      }
      // WHEN THE VALUE IS EMPTY RETURN `true` by default
      return true;
    })
});

function checkDuplicate(valueToCheck) {
  return new Promise(async (resolve, reject) => {
    let isDuplicateExists;

    // EXECUTE THE API CALL TO CHECK FOR DUPLICATE VALUE
    api.post('url', valueToCheck)
    .then((valueFromAPIResponse) => {
      isDuplicateExists = valueFromAPIResponse; // boolean: true or false
      resolve(isDuplicateExists);
    })
    .catch(() => {
      isDuplicateExists = false;
      resolve(isDuplicateExists);
    })
  });
}

使用yup模式进行Formik异步字段验证

1 个答案: