本文详解如何使用 yup 的自定义校验规则，实现在 hascategory 为 true 时强制要求至少一个分类（如 cat1–cat4）被选中，反之则完全忽略分类字段的校验。
本文详解如何使用 yup 的自定义校验规则，实现在 hascategory 为 true 时强制要求至少一个分类（如 cat1–cat4）被选中，反之则完全忽略分类字段的校验。
在构建表单验证逻辑时，常需处理“条件性必填”场景——即某组字段是否生效，取决于另一个开关字段（如布尔型控制项）的状态。Yup 本身不直接支持跨字段的条件约束（如 when() 无法对多个目标字段批量设置依赖），但可通过 .test() 方法灵活注入自定义校验逻辑，精准实现此类需求。
以下是一个完整、可直接复用的验证 Schema 示例：
import * as Yup from 'yup';
const validationSchema = Yup.object()
.shape({
hasCategory: Yup.boolean().required(
'Yes or No must be selected for special ad category'
),
cat1: Yup.boolean(),
cat2: Yup.boolean(),
cat3: Yup.boolean(),
cat4: Yup.boolean()
})
.test(
'hasCategory', // 测试标识符（建议与字段名一致，便于调试）
'At least one category must be true', // 校验失败时的错误消息
(value) => {
// 当 hasCategory 为 false 时，跳过校验，直接通过
if (!value.hasCategory) return true;
// 否则检查至少一个分类为 true；使用位或（|）简洁判断布尔值
// 等价于：value.cat1 || value.cat2 || value.cat3 || value.cat4
return value.cat1 | value.cat2 | value.cat3 | value.cat4;
}
);✅ 关键要点说明：
- .test() 是 Yup 提供的通用自定义校验入口，接收测试名、错误信息和校验函数；其参数 value 为当前整个对象的值（即表单数据），可安全访问所有字段。
- 使用位运算符 | 判断布尔值是安全且高效的（因 true | false === true，且所有 false | false | ... 结果为 false），但语义上更推荐显式使用逻辑或 || 提升可读性（二者在此场景效果一致）：
return value.cat1 || value.cat2 || value.cat3 || value.cat4;
- 此校验属于对象级测试（object-level test），因此必须挂载在 Yup.object() 之后，而非某个具体字段上——这样才能同时读取 hasCategory 和所有 catX 字段。
- 错误消息将绑定到整个表单对象（非特定字段），若需精确绑定至某字段（如 cat1），需改用 Yup.reach() + 字段级 when() 组合方案，但本例中统一提示更符合 UX 需求。
⚠️ 注意事项：
- 确保传入 validationSchema.validate() 的数据结构与 .shape() 定义完全一致（例如 cat1–cat4 必须存在，即使为 undefined 或 null）；否则 value.catX 可能为 undefined，导致 undefined || ... 返回 false 而误判失败。可在 Schema 中为分类字段添加默认值：
cat1: Yup.boolean().default(false), // ... 其他同理
- 若未来分类字段动态增减（如从 4 个扩展为 N 个），建议将分类键名提取为数组，用 some() 方法重构校验逻辑，提升可维护性：
const categoryKeys = ['cat1', 'cat2', 'cat3', 'cat4']; return value.hasCategory ? categoryKeys.some(key => value[key]) : true;
综上，借助 Yup 的 .test() 方法，开发者无需引入额外库或手动预处理数据，即可优雅、声明式地实现复杂条件校验逻辑，兼顾健壮性与可读性。
