javascript - 是的条件验证

Question

我有一个电子邮件字段，仅在选中复选框时才会显示( bool 值为 true)。当表单提交时，如果选中复选框( bool 值为 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 收到验证错误。我做错了什么？

Answer 1

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

我已经做了一个 CodeSandox 来测试它，一旦我添加:

showEmail: yup.boolean()

表单正确开始验证，并且没有引发错误。

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

对于 future 来说，这是正确的验证模式:

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