在使用yup进行表单验证时,可以通过使用when
方法来实现字段依赖于其他字段值的验证逻辑。when
方法接受三个参数:依赖字段的名称、依赖字段的值、验证规则。
以下是一个示例代码,演示了如何使用when
方法来添加不同的验证规则:
import * as yup from 'yup';
const schema = yup.object().shape({
field1: yup.string().required('Field 1 is required'),
field2: yup.string().when('field1', {
is: 'value1',
then: yup.string().required('Field 2 is required when Field 1 is value1'),
otherwise: yup.string().notRequired()
}),
field3: yup.string().when(['field1', 'field2'], {
is: (field1, field2) => field1 === 'value1' && field2 === 'value2',
then: yup.string().required('Field 3 is required when Field 1 is value1 and Field 2 is value2'),
otherwise: yup.string().notRequired()
}),
});
// 使用示例
const data = {
field1: 'value1',
field2: 'value2',
field3: 'value3',
};
schema.validate(data)
.then(validatedData => {
// 验证通过
console.log(validatedData);
})
.catch(errors => {
// 验证失败
console.log(errors);
});
在上述示例中,我们定义了一个yup的验证schema,包含了三个字段:field1
、field2
和field3
。field2
的验证规则依赖于field1
的值,当field1
的值为value1
时,field2
为必填字段;否则,field2
为非必填字段。field3
的验证规则依赖于field1
和field2
的值,当field1
的值为value1
且field2
的值为value2
时,field3
为必填字段;否则,field3
为非必填字段。
这样,通过使用when
方法,我们可以根据字段之间的依赖关系来动态添加不同的验证规则,实现灵活的表单验证逻辑。
关于yup的更多详细信息和用法,可以参考腾讯云相关产品和产品介绍链接地址:yup - JavaScript object schema validator。
领取专属 10元无门槛券
手把手带您无忧上云