Antd Checkbox多选组实现至少选一项校验逻辑异常如何解决？

问题根因 #

1. 初始代码报错原因：你在单个Form.Item下直接放置了多个独立Checkbox组件，同时设置了valuePropName="checked"，而Form.Item只能读取绑定组件的value属性，多个独立Checkbox没有统一的value字段提交给Form，表单永远无法识别到选中状态，因此必填校验一直触发。
2. 修改后规则失效原因：你写的required布尔值逻辑存在运算优先级错误，&&优先级低于===，实际执行逻辑是「其余六个选项全为true，且sun选项为false」时required才为true，和你需要的「全部未选中时触发校验」逻辑完全不符，因此不会弹出提示。

方案1：使用Checkbox.Group（官方推荐） #

将多个Checkbox包裹在Checkbox.Group组件内，Form.Item直接绑定Group组件，通过自定义校验规则判断选中数组长度即可，无需单独给每个Checkbox绑定onChange事件存state：

<Form.Item
  name="checkboxes"
  rules={[
    {
      validator: (_, value) => {
        if (value?.length > 0) return Promise.resolve();
        return Promise.reject(new Error("Please select atleast one working day"));
      }
    }
  ]}
>
  <Checkbox.Group>
    <Checkbox value="sun">Sun</Checkbox>
    <Checkbox value="mon">Mon</Checkbox>
    <Checkbox value="tue">Tue</Checkbox>
    <Checkbox value="wed">Wed</Checkbox>
    <Checkbox value="thu">Thu</Checkbox>
    <Checkbox value="fri">Fri</Checkbox>
    <Checkbox value="sat">Sat</Checkbox>
  </Checkbox.Group>
</Form.Item>

方案2：保留单独Checkbox的写法 #

如果你确实需要保留每个Checkbox单独绑定onChange存state的写法，可以直接在校验规则中读取state判断是否全未选中：

<Form.Item
  name="checkboxes"
  rules={[
    {
      validator: () => {
        const { mon, tue, wed, thu, fri, sat, sun } = this.state;
        // 所有选项都未选中时抛出错误
        if (!mon && !tue && !wed && !thu && !fri && !sat && !sun) {
          return Promise.reject(new Error("Please select atleast one working day"));
        }
        return Promise.resolve();
      }
    }
  ]}
>
  <Checkbox onChange={this.sun} checked={this.state.sun}>Sun</Checkbox>
  <Checkbox onChange={this.mon} checked={this.state.mon}>Mon</Checkbox>
  <Checkbox onChange={this.tue} checked={this.state.tue}>Tue</Checkbox>
  <Checkbox onChange={this.wed} checked={this.state.wed}>Wed</Checkbox>
  <Checkbox onChange={this.thu} checked={this.state.thu}>Thu</Checkbox>
  <Checkbox onChange={this.fri} checked={this.state.fri}>Fri</Checkbox>
  <Checkbox onChange={this.sat} checked={this.state.sat}>Sat</Checkbox>
</Form.Item>

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