这是我的验证架构:
const validationSchema = Yup.object().shape({
person: Yup.object().shape({
name: Yup.string().required('Field is required'),
surname: Yup.string().required('Field is required'),
middleName: Yup.string().required('Field is required'),
email: Yup.string()
.email('Wrong e-mail format')
.required('Field is required')
}),
company: Yup.object().shape({
name: Yup.string().required('Field is required'),
address: Yup.string().required('Field is required'),
email: Yup.string()
.email('Wrong e-mail format')
.required('Field is required')
})
});
React State中还有两个变量:isPerson
和isCompany
。如何有条件地进行验证工作,例如如果isPerson
为真,那么person
中的validationSchema
是否需要验证?
您可以像任何其他对象一样有条件地添加到验证模式:
let validationShape = {
company: Yup.object().shape({
name: Yup.string().required('Field is required'),
address: Yup.string().required('Field is required'),
email: Yup.string()
.email('Wrong e-mail format')
.required('Field is required')
})
};
if (this.state.isPerson) {
validationShape.person = Yup.object().shape({
name: Yup.string().required('Field is required'),
surname: Yup.string().required('Field is required'),
middleName: Yup.string().required('Field is required'),
email: Yup.string()
.email('Wrong e-mail format')
.required('Field is required');
}
const validationSchema = Yup.object().shape(validationShape);
你可以使用Yup条件
const validationSchema = Yup.object().shape({
isCompany: Yup.boolean(),
companyName: Yup.object().when('isCompany', {
is: true,
then: Yup.string().required('Field is required'),
otherwise: Yup.string()
}),
companyAddress: Yup.object().when('isCompany', {
is: (companyValue) => true,//just an e.g. you can return a function
then: Yup.string().required('Field is required'),
otherwise: Yup.string()
}),
});
并确保相应地更新您的表单。我希望你明白这一点......