如何用Yup+Formik确保FieldArray中仅存在一个默认人员？

要实现“严格只有一个人员设为默认”的验证，你可以给Yup数组添加自定义test规则，统计数组中isDefault为true的元素数量，确保数量恰好为1。

修改后的完整Schema代码如下：

export const schemaPerson = () => {
  return Yup.object().shape({
    persons: Yup.array()
      .of(
        Yup.object().shape({
          firstname: Yup.string().required('名字不能为空'),
          lastname: Yup.string().required('姓氏不能为空'),
          isDefault: Yup.boolean().required('请选择是否为默认人员')
        })
      )
      .min(1, '至少需要添加一个人员')
      // 自定义验证规则：确保仅一个默认人员
      .test(
        'exactly-one-default',
        '必须且只能选择一个默认人员',
        function (persons) {
          // 兜底判断数组是否存在，不过min(1)已经确保数组至少有一个元素
          if (!persons) return false;
          // 统计isDefault为true的人数
          const defaultCount = persons.filter(p => p.isDefault).length;
          // 只有数量等于1时验证通过
          return defaultCount === 1;
        }
      ),
  });
};

关键说明： #

• 新增的test方法接收三个参数：自定义验证标识、错误提示文案、验证函数。
• 验证函数通过filter统计默认人员的数量，只有当数量严格等于1时返回true，否则验证失败。
• 错误信息会绑定到persons字段上，你可以在表单中对应的位置渲染这个错误，比如FieldArray组件的上方：

{form.errors.persons && <div className="text-red-500">{form.errors.persons}</div>}

这样就能满足“严格只有一个默认人员”的验证需求，不管是新增还是删除元素，只要默认人数不符合要求就会触发错误提示。

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