如何為 form.item ANTD 添加自定義驗證

Question

如何在 ANTD 中為 form.item 添加自定義驗證器。 我有一個帶有圖片上傳的表單項。 但是因為它不是文本字段，所以它不能正常工作。 有什么方法可以將自定義驗證器和條件true/false添加到表單項？

<Form.Item
  name='photo'
  label={'photo'}
  rules={[
    {
      required: true,
      message: 'upload Photo',
     },
   ]}
 >

   <ImgCrop rotate>
     <Upload
       listType="picture-card"
       fileList={fileList}
       beforeUpload={beforeUpload}
       onChange={onChange}
       onPreview={onPreview}
       maxCount={1}
      >
        UPLOAD
      </Upload>
  </Form.Item>

Answer 1

您可以使用Upload 組件的beforeUpload 屬性作為自定義驗證器。 假設，如果您想限制小於 200 mb 的文件。 試試下面的。

   <Upload
  name="file"
  accept=".mov,.mp4,.mpeg-ts,.avi,.png,.jpg,.jpeg,.bmp"
  showUploadList={false}
  beforeUpload={(file) => {
    if (file.type.includes("video")) {
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        message.error(
          intl.formatMessage({
            defaultMessage: "Video must smaller than 200MB!",
          })
        );
        setDefaultFileList(null);
        return false;
      }
      return true;
    }
    return true;
  }}
  customRequest={handleUploadMedia}
  css="margin-top:20px;display:block"
></Upload>