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

标签 javascript reactjs typescript yup

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

我创建了以下 promise 来 try catch 服务器通信错误:

.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 方法,该方法在示例中似乎有详细信息,但在此上下文中似乎不存在。

最佳答案

    /* 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语法(不是箭头=>)

关于javascript - 使用 Yup 和 Typescript 的动态验证消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60154861/

相关文章:

javascript - 使用 JavaScript Onclick 事件将数据传递到 Django 中的views.py?

javascript - 为什么框架内的异常在 qUnit 中得不到通知?

javascript - 如何使用 async wait 在 React 组件的渲染中运行异步函数?

javascript - 从对象数组中的字符串中查找数值并进行计算

Angular2 从模块导入组件/服务

javascript - 使用文件 ://在本地加载的来自移动 WebView 的 CORS cookie 凭据

javascript - Javascript 是否按顺序运行代码行?并完成处理然后继续?

typescript - TypeScript 中 protected 的等价物是什么?

angularjs - 在 React 中使用自定义 Angular 指令

typescript - 类名不会覆盖 AppBar 的根样式