使用 Yup 进行条件表单验证

Question

我是 Yup 的初学者，我需要用 Yup 做一些表单验证。这是我的架构示例：

    const MyFormSchema = Yup.object().shape({
       contactId: Yup.string().required(),
       phoneNumber : Yup.string().phoneNumber().required(),
       email: Yup.string().email().required()
    });

我的表单在 2 种情况下有效：用户输入 contactID 或输入电话号码和电子邮件。

我尝试使用 test 函数实现此功能，但无法实现。任何帮助，将不胜感激。

Answer 1

您可以为其余 2 个字段构建相同的逻辑：

Yup.object().shape({
    contactId: Yup.string().when(["phoneNumber", "email"], {
      is: (phoneNumber, email) => !phoneNumber || !email,
      then: Yup.string().required()
    }),
    phoneNumber: Yup.string().when("contractId", {
      is: contactId => !!contactId,
      then: Yup.string().required()
    }),
    email: Yup.string().when("contractId", {
      is: contactId => !!contactId,
      then: Yup.string()
        .email()
        .required()
    })
});

要检查电子邮件，您可以使用内置函数 Yup.email()。对于 phone，您需要构建自定义验证器：

const PHONE_VALIDATOR = /...your RegEx here.../

...
phoneNumber : Yup.string().matches(PHONE_VALIDATOR, 'Phone is not valid').required()

使用 Yup 进行条件表单验证

Conditional form validation with Yup

validation

reactjs

yup

formik