是的条件验证

我有一个电子邮件字段，只有当一个复选框被选中时才会显示(布尔值是 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 和肯尼亚得到了一些错误:

未捕获(在承诺中) TypeError: 无法读取未定义的属性“ length” 在 yupToFormError (formik.es6.js: 6198) 在 Formik.es6.js: 5933 在 < 匿名 > YupToFormError@formik.es6.js: 6198

而且我也会从 Yes 中得到验证错误。我做错了什么？

190084 次浏览
小开

您可能没有为 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")
})
})
}
小开

完全同意@Jo ão Cunha 的回答。只是对 Radio 按钮用例的一个补充。

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

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>

这是单选按钮更改时的回调函数。如果我们使用 Formik，那么 SetFieldValue就是正确的选择。

handleRadioButtonChange(value, setFieldValue) {
this.setState({'preferredContact': value});
setFieldValue('preferredContact', value);
}
小开

这里是 Formik 作者..。

要使 Yup.when正常工作，您必须将 showEmail添加到 initialValues并添加到您的 Yeah 模式形状。

一般来说，在使用 validationSchema时，最佳做法是确保所有窗体的字段都具有初始值，以便 Yes 可以立即看到它们。

结果会是这样的:

<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(),
email: yup
.string()
.email()
.when("showEmail", (showEmail) => {
if(showEmail)
return 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')
}),
小开

我用 yup 和 vee-valid

Vee 确认

这里是来自项目的示例代码

const schema = yup.object({
first_name: yup.string().required().max(45).label('Name'),
last_name: yup.string().required().max(45).label('Last name'),
email: yup.string().email().required().max(255).label('Email'),
self_user: yup.boolean(),
company_id: yup.number()
.when('self_user', {
is: false,
then: yup.number().required()
})
})
const { validate, resetForm } = useForm({
validationSchema: schema,
initialValues: {
self_user: true
}
})


const {
value: self_user
} = useField('self_user')
const handleSelfUserChange = () => {
self_user.value = !self_user.value
}
小开

它对我很有效:

   Yup.object().shape({
voyageStartDate:Yup.date(),
voyageEndDate:Yup.date()
.when(
'voyageStartDate',
(voyageStartDate, schema) => (moment(voyageStartDate).isValid() ? schema.min(voyageStartDate) : schema),
),
})

提交答案