React中使用yup实现至少两个指定字段必填的校验规则如何编写？

你现有的when链式写法本身可以满足3个社交账号字段至少2项必填的要求，逻辑本质是每个字段仅在另外两个字段均已填写的场景下允许留空，其余场景强制必填，刚好匹配至少2项非空的规则。

如果追求更简洁、易维护的写法，推荐直接在对象层级使用yup.test()做统一校验，代码如下：

const validationSearch = yup.object().shape({
  instagramProfileId: yup.string(),
  tiktokProfileId: yup.string(),
  youtubeProfileId: yup.string()
// 自定义校验规则
}).test('min-two-filled', '请至少填写2个社交账号信息', function (obj) {
  // 统计已填写的非空字段数量
  const validFieldsCount = [
    obj.instagramProfileId,
    obj.tiktokProfileId,
    obj.youtubeProfileId
  ].filter(Boolean).length;
  // 大于等于2则校验通过
  return validFieldsCount >= 2;
});

注意事项 #

• 原有写法中的$前缀是用于获取Yup上下文参数的标识，如果你是直接把三个字段放在校验对象的第一层，无需加$前缀
• 统一test的写法后续如果要新增校验字段，只需要往统计数组中添加对应的字段名即可，不需要每个字段重复写when逻辑
• 校验失败的提示文案可根据业务需求自行修改

内容的提问来源于stack exchange，提问作者Joseph