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

Zer*_*rty 2 reactjs yup formik

我正在尝试在 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
            });
        },
    });
}
Run Code Online (Sandbox Code Playgroud)

将自定义函数添加到 addMethod

Yup.addMethod(Yup.string, "invalidEmails", invalidEmails);
Run Code Online (Sandbox Code Playgroud)

最后将它添加到 Yup Schema 中:

<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>
    )}
/>
Run Code Online (Sandbox Code Playgroud)

Has*_*eau 5

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

let schema = Yup.string().email();
let result = schema.isValidSync("test@test.com"); // isValidSync returns boolean
Run Code Online (Sandbox Code Playgroud)

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

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