reactjs - 是的:如何仅在字段存在时验证字段？

Question

是否可以仅在字段存在时对其进行验证？
我要创建一个应用程序。字段(电子邮件)可能会/可能不会在步骤 2 中显示，这取决于步骤 1 的所选选项。问题是我不能放email: Yup.string().Required() ，它会导致验证一直运行，即使该字段未显示。

Answer 1

您可以设置一个额外的 bool 键，其中值默认为 false。在步骤 1 中修改值时将其更改为 true。然后，如果该键的值为 true，则应用验证。
像这样的东西。

    const initialSchema= {
      name: '',
      isEmail: false, // change this when you want to add validation
      email: '',
      phone: '',
    };
    
    const validationSchema = Yup.object().shape({
      name: Yup.string()
        .required('Enter Name')
      isEmail: Yup.boolean(),
      email: Yup.string().when('isEmail', {
         is: true,
         then: Yup.string()
         .required('Enter Email ID'),
         otherwise: Yup.string(),
      }),
      phone: Yup.string()
        .required('Enter Mobile No'),
    });

这是 documentation reference对于相同。
更新:
Here是工作代码和盒子。我添加了复选框 display:none; ，并在数据上下文中添加了默认状态值。