使用Yup逗号分隔的电子邮件验证

时间:2019-09-17 00:50:59

标签: reactjs formik yup

我正试图在Yup中为逗号分隔的电子邮件地址编写一个验证模式。

到目前为止,我已经创建了自定义验证功能并将其添加到我的模式中。它将逗号分隔的用户输入推入数组中...我要做的是使用内置的Yup.string().email()验证数组中的每封电子邮件。

function invalidEmails(this: Yup.StringSchema, msg: string) {
    return this.test({
        name: "invalidEmails",
        message: msg,
        test: (value) => {
            // push email into emails array
            const emails = value.replace(/\s/g, "").split(",");
            emails.forEach((email: any) => {
                // I want to run the Yup.string().email() validation for each email
            });
        },
    });
}

将自定义函数添加到addMethod

Yup.addMethod(Yup.string, "invalidEmails", invalidEmails);

最后将其添加到Yup架构:

<Formik
    initialValues={{
        emails: ""
    }}
    validateOnBlur={true}
    validationSchema={Yup.object().shape({
        emails:
            Yup.string().checkEmails("One or more email is not valid"),
    })}
    render={(formikProps: any) => (
        <Form>
            <input name="emails" /> // email field
        </Form>
    )}
/>

1 个答案:

答案 0 :(得分:0)

要独立检查单个电子邮件,代码如下所示,您可以对其进行修改以适合您的功能。

let schema = Yup.string().email();
let result = schema.isValidSync("test@test.com"); // isValidSync returns boolean

在发现isValid和isValidSync之前,我不得不处理以下错误

  

解析错误:无法在异步函数外使用关键字“ await”