如何使用Yup实现至多n个字段非默认及条件校验功能?
当然可以用Yup实现这类自定义校验,核心是利用Yup的test方法编写自定义逻辑,下面分别解决你的两个场景:
场景1:三个字段中恰好一个不等于默认值
首先需要明确每个字段的默认值,然后通过自定义校验统计非默认字段的数量,判断是否等于1。示例代码如下:
import * as yup from 'yup'; // 定义各字段的默认值 const defaultValues = { field1: '', field2: false, field3: [] }; const schema = yup.object().shape({ field1: yup.string().default(defaultValues.field1), field2: yup.boolean().default(defaultValues.field2), field3: yup.array().default(defaultValues.field3), }).test( 'exactly-one-non-default', '必须恰好有一个字段修改了默认值', (values) => { // 遍历字段,统计不等于默认值的数量 const nonDefaultCount = Object.entries(values).reduce((count, [key, value]) => { return value !== defaultValues[key] ? count + 1 : count; }, 0); // 校验是否恰好有一个非默认字段 return nonDefaultCount === 1; } );
场景2:根据field0的值动态校验
这个场景需要根据field0的布尔值,执行不同的校验逻辑:当field0为true时,field1/field2/field3中恰好一个非默认;当field0为false时,这三个字段必须全为默认值。示例代码如下:
import * as yup from 'yup'; // 定义各字段的默认值 const defaultValues = { field0: false, field1: '', field2: false, field3: [] }; const schema = yup.object().shape({ field0: yup.boolean().default(defaultValues.field0), field1: yup.string().default(defaultValues.field1), field2: yup.boolean().default(defaultValues.field2), field3: yup.array().default(defaultValues.field3), }).test( 'dynamic-field-check', // 动态生成错误提示 (values) => values.field0 ? '当field0为true时,必须恰好修改一个字段的默认值' : '当field0为false时,所有字段必须保持默认值', (values) => { // 只统计目标字段(field1、field2、field3)的非默认数量 const targetFields = ['field1', 'field2', 'field3']; const nonDefaultCount = targetFields.reduce((count, key) => { return values[key] !== defaultValues[key] ? count + 1 : count; }, 0); // 根据field0的值执行对应校验逻辑 if (values.field0) { return nonDefaultCount === 1; } else { return nonDefaultCount === 0; } } );
内容的提问来源于stack exchange,提问作者maja
相关产品推荐
相关产品推荐

