Yup表单验证如何实现两个复选框至少选中一个的要求

原代码问题分析 #

• 校验逻辑错误：when方法的依赖项错误设置为字段自身，两个字段的校验规则没有建立关联，完全无法实现「二选一」的校验需求
• 冗余规则：布尔类型字段用oneOf([true])已经可以强制值为真，额外加required()是冗余逻辑，required()仅校验字段值不为undefined，和你的需求不匹配

正确实现方案 #

方案1：使用test方法（更简洁，推荐） #

直接对整个yearGroups对象做自定义校验，逻辑直观易维护：

yearGroups: yup.object().shape({
  primary: yup.bool(),
  secondary: yup.bool()
})
.test('atLeastOneSelected', '至少需要选中其中一个选项', (value) => {
  return value?.primary === true || value?.secondary === true
})

方案2：使用when互相依赖（适合需要单独给字段挂错误提示的场景） #

两个字段互相依赖，需要显式声明循环依赖避免Yup报错：

yearGroups: yup.object().shape({
  primary: yup.bool().when('secondary', {
    is: false,
    then: yup.bool().oneOf([true], '至少需要选中其中一个选项')
  }),
  secondary: yup.bool().when('primary', {
    is: false,
    then: yup.bool().oneOf([true], '至少需要选中其中一个选项')
  })
// 显式声明循环依赖的字段对，解决Yup循环依赖报错
}, [['primary', 'secondary']])

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