Yup 中的条件验证

小能豆

Yup 中的条件验证

javascript

我有一个电子邮件字段，只有选中复选框（布尔值为true）时才会显示。提交表单时，我仅当选中复选框（布尔值为 true）时才需要此字段。

这是我迄今为止尝试过的：

const validationSchema = yup.object().shape({
   email: yup
         .string()
         .email()
         .label('Email')
         .when('showEmail', {
             is: true,
             then: yup.string().required('Must enter email address'),
         }),
    })

我尝试了其他几种变体，但是 Formik 和 Yup 出现了错误：

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at yupToFormErrors (formik.es6.js:6198)
    at formik.es6.js:5933
    at <anonymous>
yupToFormErrors @ formik.es6.js:6198

我也收到了 Yup 的验证错误。我做错了什么？

阅读 43

2024-06-05

共1个答案

小能豆

您可能没有为showEmail字段定义验证规则。

我已经完成了 CodeSandox 来测试它，并且我立即添加了：

showEmail: yup.boolean()

表单已正确开始验证并且未引发任何错误。

这是网址：https ://codesandbox.io/s/74z4px0k8q

对于未来来说，这是正确的验证模式：

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: yup.string().required("Must enter email address")
      })
  })
}

2024-06-05