是的：如何仅在字段存在时对其进行验证？

Question

是否可以只在字段存在时才对其进行验证？

我要创建一个应用程序。字段（电子邮件）可能会/可能不会显示在第 2 步，这取决于第 1 步的选择选项。问题是我不能输入 email: Yup.string().Required()，这会导致验证一直运行，甚至不显示该字段。

Answer 1

您需要手动处理，而不是必需的。只需要保持每个字段的状态。并检查它是否存在它的值，然后你需要显示它。有些像这样

const [email, setEmail]= useState(null);

const onChange=(e)=>{
setEmail(e.target.value)
}

return (


<input type="text" onChange={onChnage}/>
)

并将此电子邮件传递给您的 parent，您将在那里检查验证。如果 email 中有任何内容，则显示它进行其他验证。或者如果它是空的或 Null 则不显示它。

谢谢

Answer 2

您可以设置一个额外的布尔键，其值默认为 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; 添加了复选框，并在数据上下文中添加了默认状态值。

Answer 3

我使用转换动态修改模式

  const updateUserValidator = yup.object().shape({
        email: yup.string(),
        updateBy: yup.string()
    }).transform(function (current, original) {
        this.fields.email = original?.email?.length === undefined ? yup().string().email() : yup().string().email().required()
        return current;
        })

Answer 4

我在这里看到了另一个相关的答案，也许这也是一个有效的解决方案？

https://github.com/jquense/yup/issues/1114

从那里复制代码：

const schema = yup.object({
    phone: yup.string().when('$exist', {
        is: exist => exist,
        then: yup.string().required(),
        otherwise: yup.string()
    })
})

是的：如何仅在字段存在时对其进行验证？

Yup: How to validate field only when it exists?

reactjs

yup

react-hook-form