Question

我正在尝试使用Yup创建一些自定义错误消息，以确定是否正在使用用户的电子邮件地址。

我创建了以下承诺来尝试捕获服务器通信错误：

.test(
{
    name: 'Email Check',
    test: value => {
        if (value.includes("@")) {
            return new Promise<yup.ValidationError>((resolve, reject) => {
                let client = new RegistrationApi();
                client.emailCheck(value,
                    x => x ? resolve(undefined) : resolve(new yup.ValidationError("E-mail address already used", value, "")),
                    () =>resolve(new yup.ValidationError("Failed to contact server", value, "")),
                    undefined);
            });
        }
        else {
            return false;
        }
    }
}),

返回验证错误不会导致显示任何错误消息。我究竟做错了什么？我尝试使用createError方法，该方法似乎是示例中的详细信息，但在这种情况下似乎并不存在。

Answer 1

关于代码，您将要 reject 而不是resolve您的Promise。

通常；您需要向您的yup模式的validation function返回承诺。或者，您可以写一个specific async test。

Answer 2

createError需要在测试方法的函数声明中使用。您当前正在使用箭头功能。

Answer 3

我会在单独的助手中完成。例如，它可以是一个实用程序或钩子，您可以在其中手动检查某些内容并设置/重置错误。

if (isNotValid) {
  await form.setError('myError', {
    type: 'manual',
    message: mealErrorMsg,
  });
} else {
  await form.clearErrors('myError');
}

Answer 4

    /* An example of a dynamic error message for Required, depending on other vars */
    title: yup.string().nullable().test('test-titleRequired', '',  function (value, context) {
        if (!value || !value.trim().length) {
            if (context.parent.someOtherField === 'Special Value') {
                return this.createError({ message: 'Message Version 1' });
            } else {
                return this.createError({ message: 'Message Version 2' });
            }
        } else {
            return true;
        }
    }),

重要说明：必须使用 function 语法（不是箭头 =>）

使用Yup和Typescript的动态验证消息

4 个答案: