Javascript Yup中的条件验证

我有一个仅在选中复选框时显示的电子邮件字段（布尔值为

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:无法读取未定义的属性“length”
在yupToFormErrors（formik.es6.js:6198）
在formik.es6.js:5933
在
yupToFormErrors@formik.es6.js:6198

---

我也从Yup那里得到了验证错误。我做错了什么

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

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

showEmail: yup.boolean()

表单正确启动验证，未引发任何错误

这是url:

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

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

---

完全同意@João Cunha的回答。只是单选按钮用例的补充

当我们使用单选按钮作为条件时，我们可以检查字符串的值而不是布尔值。e、 g.

是：“电话”

const ValidationSchema = Yup.object().shape({
  // This is the radio button.
  preferredContact: Yup.string()
    .required('Preferred contact is required.'),
  // This is the input field.
  contactPhone: Yup.string()
    .when('preferredContact', {
      is: 'Phone',
      then: Yup.string()
        .required('Phone number is required.'),
    }),
  // This is another input field.
  contactEmail: Yup.string()
    .when('preferredContact', {
      is: 'Email',
      then: Yup.string()
        .email('Please use a valid email address.')
        .required('Email address is required.'),
    }),

});

这是用ReactJS编写的单选按钮，onChange方法是触发条件检查的关键

<label>
  <input
    name="preferredContact" type="radio" value="Email"
    checked={this.state.preferredContact == 'Email'}
    onChange={() => this.handleRadioButtonChange('Email', setFieldValue)}
  />
  Email
</label>
<label>
  <input
    name="preferredContact" type="radio" value="Phone"
    checked={this.state.preferredContact == 'Phone'}
    onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)}
  />
  Phone
</label>

福米克的作者在这里

要使

Yup。当

正常工作时，您必须将

showmail

添加到

initialValues

和Yup架构形状中

通常，在使用

验证模式

时，最佳做法是确保所有表单字段都具有初始值，以便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")
      })
  })
}

/>

---

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

validationSchema={yup.object（）.shape({
showEmail:yup.boolean（），
电子邮件：是的
.string（）
.email（）
.when（“showEmail”，（showEmail）=>{
如果（显示电子邮件）
返回yup.string（）.required（“必须输入电子邮件地址”）
})
})
}

showEmail有三个可能的值时，这将如何工作？也就是说，它不是一个布尔值（），而是一个字符串（），您将使用一个函数向is键添加一个特定的测试：is:（emailValue）=>emailValue==“您希望它匹配的某个测试字符串”谢谢您的回答，我真的不知道您是如何想出这个解决方案的，但这反映了许多npm包的一个主要问题，也就是说，90%的库文档应该从Git问题或答案中提取。更新的codesandbox

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

/>

email: Yup.string()
    .when(['showEmail', 'anotherField'], {
        is: (showEmail, anotherField) => {
            return (showEmail && anotherField);
        },
        then: Yup.string().required('Must enter email address')
    }),