我有一个电子邮件字段,只有当复选框被选中时才会显示(布尔值为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得到了验证错误。我做错了什么?
7条答案
按热度按时间axr492tv1#
您可能没有为showEmail字段定义验证规则。
我已经做了一个CodeSandox测试出来,只要我补充说:
表单已正确启动验证,未引发错误。
这是网址:https://codesandbox.io/s/74z4px0k8q
对于将来,这是正确的验证模式:
qvtsj1bj2#
我是福米克作家...
要使
Yup.when
正常工作,必须将showEmail
添加到initialValues
和Yup架构形状中。通常,在使用
validationSchema
时,最佳实践是确保表单的所有字段都有初始值,以便Yup可以立即看到它们。结果如下所示:
u4vypkhs3#
完全同意@João库尼亚的回答,只是对单选按钮用例的补充。
当我们使用单选按钮作为条件时,我们可以检查字符串值而不是布尔值。例如
is: 'Phone'
这是用ReactJS编写的单选按钮,onChange方法是触发条件检查的关键。
这里是当单选按钮改变时的回调函数。如果我们使用Formik,这是应该做的。
l5tcr1uw4#
您甚至可以将函数用于复杂的情况。
vfhzx4xs5#
af7jpaap6#
这对我很有效:
8ulbf1ek7#
我将yup与vee-validate一起使用
验证
下面是来自project的示例代码