Question

Yup 中的条件验证

2018-03-20

341388

javascript reactjs yup formik

我有一个电子邮件字段，只有选中复选框时才会显示（布尔值为 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 的验证错误。我做错了什么？

Answer 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")
      })
  })
}

Answer 2

Formik 作者在此...

要使 Yup.when 正常工作，您必须将 showEmail 添加到 initialValues 和您的 Yup 架构形状中。

通常，在使用 validationSchema 时，最佳做法是确保您表单的所有字段都具有初始值，以便 Yup 可以立即看到它们。

结果将如下所示：

<Formik 
  initialValues={{ email: '', showEmail: false }}
  validationSchema={Yup.object().shape({
    showEmail: Yup.boolean(),
    email: Yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: Yup.string().required("Must enter email address")
      })
  })
}

/>

Answer 3

您甚至可以对复杂情况使用函数。函数 case 有助于进行复杂的验证

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", (showEmail, schema) => {
        if(showEmail)
          return schema.required("Must enter email address")
        return schema
      })
  })
}