代码之家 › 专栏 › 技术社区 › Dimitri

使用Yup表单验证架构

yup formik validation reactjs

Dimitri · 技术社区 · 5 年前

我是初学者在Yup和我需要做一些形式验证与Yup。下面是我的模式示例:

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

我的表格在两种情况下有效:要么用户输入联系人ID,要么他输入电话号码和电子邮件。

我试着用 test 功能,但无法执行。任何帮助都将不胜感激。

1 回复 | 直到 5 年前

demkovych 5 年前

您可以为rest 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()
    })
});

要检查电子邮件,可以使用内置函数 是的。电子邮件() . 对于手机,您需要构建自定义验证程序:

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

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

推荐文章

George Alexander · 类似电报的用户名的Regex

1 年前

Community wiki · 如何强制jQueryValidate检查数据库中的重复用户名?

1 年前

Aliaksei · 保存前进行WebFlux检查

2 年前

Nimet · 如何在regex密码模式中转义*

2 年前

Ajith S Balaji · 自定义字段woo commerce checkout上的验证错误

2 年前

Jee · PowerShell输入验证-输入不应为所有数字

6 年前

ParminderBrar · Cakehph3:如何在cakephp中验证枚举类型Mysql字段?

6 年前

Arsee · 表单数据验证

6 年前

Sadman Rizwan · 验证Firebase云函数中的存储文件数据

6 年前

James · Django使用RangeWidget验证表单

6 年前