如何使用Yup实现两个复选框最多仅可勾选一个的校验规则

Yup 实现两个复选框互斥校验的方案 #

问题原因 #

你原有代码的异常是双向when声明的循环依赖导致Yup校验顺序异常，后触发的复选框校验逻辑没有被正确执行。

推荐实现方式 #

直接在Schema顶层使用test方法做全局校验，完全避免双向依赖问题，无论勾选顺序如何都能稳定触发校验：

yup.object().shape({
  textInput: yup.string().trim().required('Text input is required.'),
  checkbox1: yup.boolean(),
  checkbox2: yup.boolean(),
}).test('exclusive-checkbox', '两个复选框不可同时勾选', function (values) {
  return !(values.checkbox1 && values.checkbox2);
})

上述代码中test方法的第二个参数为校验失败的提示文案，可根据业务需求自行修改。

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