19

这是我的验证模式：

const validationSchema = Yup.object().shape({
      person: Yup.object().shape({
        name: Yup.string().required('Field is required'),
        surname: Yup.string().required('Field is required'),
        middleName: Yup.string().required('Field is required'),
        email: Yup.string()
          .email('Wrong e-mail format')
          .required('Field is required')
      }),
      company: Yup.object().shape({
        name: Yup.string().required('Field is required'),
        address: Yup.string().required('Field is required'),
        email: Yup.string()
          .email('Wrong e-mail format')
          .required('Field is required')
      })
    });

React State 中还有两个变量：isPerson和isCompany. 如何使验证有条件地工作，例如如果isPerson为真，则person需要validationSchema验证？

4

5 回答 5

48

更新答案：2020。

你可以使用是的条件

const validationSchema = Yup.object().shape({

      isCompany: Yup.boolean(),
      companyName: Yup.string().when('isCompany', {
        is: true,
        then: Yup.string().required('Field is required')
      }),
      companyAddress: Yup.string().when('isCompany', {
        is: (isCompany) => true,//just an e.g. you can return a function
        then: Yup.string().required('Field is required'),
        otherwise: Yup.string()
      }),
    });

并确保相应地更新您的表格。我希望你明白这一点...

于 2019-05-20T08:12:51.633 回答
20

您可以像任何其他对象一样有条件地添加到您的验证模式：

let validationShape = {
  company: Yup.object().shape({
    name: Yup.string().required('Field is required'),
    address: Yup.string().required('Field is required'),
    email: Yup.string()
      .email('Wrong e-mail format')
      .required('Field is required')
  })
};

if (this.state.isPerson) {
  validationShape.person = Yup.object().shape({
    name: Yup.string().required('Field is required'),
    surname: Yup.string().required('Field is required'),
    middleName: Yup.string().required('Field is required'),
    email: Yup.string()
      .email('Wrong e-mail format')
      .required('Field is required');
}

const validationSchema = Yup.object().shape(validationShape);
于 2019-02-28T05:57:41.097 回答
2

使用 YUP 进行条件验证：

可以用when进行的各种验证如下：

1. 单值，简单条件：
规则：只有当isPerson为真时才询问personName。

personName : string().when('isPerson', {
is: true, 
then: Yup.string().required('Field is required'),
otherwise: Yup.string(),
})

2. 单一值，复杂条件：
规则：只有当公司是“IT”时才要求personName。


personName : string().when('company', {
is: (company)=> company==='IT', 
then: Yup.string().required('Field is required'),
otherwise: Yup.string(),
})

3. 多值，复杂条件：
规则：只有当公司为“IT”且人员有效时才询问人员姓名。


personName : string().when(['company', 'isPerson'], {
is: (company,isPerson)=> company==='IT'&& isPerson, 
then: Yup.string().required('Field is required'),
otherwise: Yup.string(),
})
于 2021-12-11T14:57:30.770 回答
1 
                email: Yup.string()
                    .when([‘, 'showEmail’, ’anotherField’], {
                        is: (showEmail, anotherField) => {
                            return (showEmail && anotherField);
                        },
                        then: Yup.string().required('Must enter email address')
                    }),

多个字段也可用于验证。

于 2021-04-23T14:49:37.233 回答
1

虽然公认的解决方案有效，但它有一个问题 - 要验证的两个字段是常见的，并且必须复制。就我而言，我的大多数字段都只有 2-4 个异常值。

所以这是另一个解决方案：

  1. 分别定义每个模式 - 即 3 个模式 - commonSchema 用于公共字段，personSchema 用于人员特定字段和 companySchema 用于公司特定字段。

  2. 根据状态合并模式

     const validationSchema = isPerson 
                        ? commonSchema.concat(personSchema)
                        : commonSchema.contact(companySchema)

有关“concat”的详细信息，请参阅github 上的 yup文档。

于 2021-06-22T06:54:41.640 回答