如何为ANTD的Form.Item添加支持true/false的自定义校验

针对非输入类控件（如上传组件）的校验需求，可以直接利用AntD表单规则内置的validator字段实现自定义逻辑判断，具体实现要点如下：

• 首先要保证表单能获取到控件的最新状态：如果是Upload组件，不要单独维护fileList状态，直接将fileList同步到Form的对应字段值中，避免表单拿不到最新上传状态导致校验不触发
• 在rules配置中添加validator自定义校验函数，按照业务逻辑做true/false判断，校验通过返回Promise.resolve()，校验失败返回Promise.reject(错误提示文本)
• 如果需要兼容上传中、上传失败的异常场景，可以在校验逻辑中追加文件状态判断，避免无效值通过校验

改造后的完整代码示例 #

import { Form, Upload, message } from 'antd';
import ImgCrop from 'antd-img-crop';

export default function PhotoForm() {
  const [form] = Form.useForm();

  // 上传前校验逻辑
  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) message.error('仅支持上传图片文件');
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) message.error('图片大小不能超过2MB');
    return isImage && isLt2M;
  };

  // 上传状态变化时同步更新表单字段值
  const onChange = ({ fileList: newFileList }) => {
    form.setFieldsValue({ photo: newFileList });
  };

  // 图片预览逻辑
  const onPreview = async (file) => {
    let src = file.url;
    if (!src && file.originFileObj) {
      src = await new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    window.open(src, '_blank');
  };

  const onSubmit = (values) => {
    console.log('表单提交值', values);
    // 提交业务逻辑
  };

  return (
    <Form form={form} onFinish={onSubmit}>
      <Form.Item
        name='photo'
        label='photo'
        rules={[
          {
            validator: (_, value) => {
              // 未上传判断
              if (!value || value.length === 0) {
                return Promise.reject('请上传照片');
              }
              // 过滤上传失败、上传中的无效状态
              const validFile = value[0]?.status === 'done' || value[0]?.originFileObj;
              if (!validFile) {
                return Promise.reject('请等待图片上传完成或重新上传');
              }
              return Promise.resolve();
            }
          },
        ]}
      >
        <ImgCrop rotate>
          <Upload
            listType="picture-card"
            maxCount={1}
            beforeUpload={beforeUpload}
            onChange={onChange}
            onPreview={onPreview}
          >
            UPLOAD
          </Upload>
        </ImgCrop>
      </Form.Item>
      <Form.Item>
        <button type="submit">提交</button>
      </Form.Item>
    </Form>
  )
}

特殊场景说明 #

如果你需要单独维护fileList状态而不存入Form字段，只需要在fileList每次更新时手动调用form.validateFields(['photo'])触发该校验项重新校验即可，校验函数内直接读取本地维护的fileList做逻辑判断也能实现相同效果。

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