如何在Antd Form rules中添加自定义校验错误，选中院校超2个时提示报错

错误原因排查 #

• validator配置格式错误：你当前写的validator: {handleCount}是将参数赋值为了包含handleCount属性的对象，不符合Antd校验规则要求的函数格式
• 自定义校验函数不符合规范：Antd的validator要求为异步函数，校验通过返回Promise.resolve()，校验失败返回Promise.reject(Error实例)，直接throw Error不会被Form组件捕获
• 内置max规则未生效的原因：max规则仅对Form.Item通过name属性绑定的表单字段值做校验，你当前的表单项未绑定对应字段，也没有关联存储选中院校的数组，自然不会触发内置校验
• 渲染逻辑问题：不要在JSX渲染中直接写count++做序号计数，重复渲染时会出现计数错误，直接使用map方法的第二个参数index即可

正确实现方式 #

方式1：使用自定义校验规则 #

首先定义符合规范的校验函数：

const validateCollegeCount = () => {
  // 直接用选中院校数组的长度判断，无需单独维护count变量
  if (collegesSelectedList.length > 2) {
    return Promise.reject(new Error("最多只能选择2所院校"))
  }
  return Promise.resolve()
}

修改Form.Item配置，绑定name属性，正确传入校验函数：

<Form.Item
  // 绑定字段名，可自定义，保证唯一即可
  name="selectedColleges"
  rules={[
    {
      validator: validateCollegeCount
    },
  ]}
>
  {collegesSelectedList.map((college, index) => (
    <ul style={{listStyleType: "none", padding: "0px"}} key={college}>
      <li>
        {/* 用map的index做序号，避免渲染计数错误 */}
        {index + 1}.{college}
        <Button
          size="small"
          onClick={() => handleRemoveList(college)}
          icon={<DeleteOutlined />}
          danger
        />
      </li>
    </ul>
  ))}
</Form.Item>

最后在院校添加/删除的操作逻辑中，手动触发该字段的校验，实现错误提示实时更新：

// 示例：添加院校后触发校验
const handleAddCollege = (college) => {
  // 原有添加逻辑
  form.validateFields(['selectedColleges'])
}

// 示例：删除院校后触发校验
const handleRemoveList = (college) => {
  // 原有删除逻辑
  form.validateFields(['selectedColleges'])
}

方式2：直接使用内置max规则（更简便） #

你不需要写自定义校验函数，只要将选中院校数组同步到Form字段中，即可直接触发内置的max校验：

<Form.Item
  name="selectedColleges"
  rules={[
    {
      max: 2,
      message: "最多只能选择2所院校"
    }
  ]}
>
  {/* 原有选中院校列表渲染逻辑 */}
</Form.Item>

每次添加/删除院校后，同步更新Form字段值即可自动触发校验：

// 示例：添加院校后同步字段
const handleAddCollege = (college) => {
  // 原有添加逻辑
  form.setFieldsValue({
    selectedColleges: collegesSelectedList
  })
}

// 示例：删除院校后同步字段
const handleRemoveList = (college) => {
  // 原有删除逻辑
  form.setFieldsValue({
    selectedColleges: collegesSelectedList
  })
}

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