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

Javascript 使用Yup和Typescript的动态验证消息,javascript,reactjs,typescript,yup,Javascript,Reactjs,Typescript,Yup,我正在尝试使用Yup创建一些自定义错误消息,以确定用户的电子邮件地址是否正在使用 我创建了以下承诺,以尝试捕获服务器通信错误: .test( { 姓名:'电子邮件检查', 测试:值=>{ if(包括(“@”)的值){ 返回新承诺((解决、拒绝)=>{ 让客户端=新注册API(); client.emailCheck(值, x=>x?解析(未定义):解析(新的yup.ValidationError(“已使用电子邮件地址”,值“”)), ()=>解析(新的yup.ValidationError(“未

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

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

.test(
{
姓名:'电子邮件检查',
测试:值=>{
if(包括(“@”)的值){
返回新承诺((解决、拒绝)=>{
让客户端=新注册API();
client.emailCheck(值,
x=>x?解析(未定义):解析(新的yup.ValidationError(“已使用电子邮件地址”,值“”)),
()=>解析(新的yup.ValidationError(“未能联系服务器”,值“”)),
未定义);
});
}
否则{
返回false;
}
}
}),

返回验证错误不会导致显示任何错误消息。我做错了什么?我曾尝试使用createError方法,该方法在示例中似乎很详细,但在此上下文中似乎不存在。

关于您的代码,您将希望
拒绝您的承诺,而不是
解决它

一般而言;
您需要向yup模式的用户返回一个承诺。或者您可以编写一个。

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

我将在单独的帮助程序中执行此操作。对于ex,它可以是一个util或hook,您可以在其中手动检查某些内容并设置/重置错误

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

重要提示:必须使用
函数
语法(而不是箭头
=>

替代解决方案,但看看这是否适用于您:您找到解决方案了吗?我也在尝试类似的东西。
    /* 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;
        }
    }),