Ant Design Vue 自定义规则校验

<template>
<div>
    <a-form
      :layout="formState.layout"
       :model="formState"
       @finish="handleFinish"
       @finishFailed="handleFinishFailed"
          :rules="rules"
          class="formbox"
        >
          <a-form-item name="user">
            <a-input v-model:value="formState.user" placeholder="请输入" class="input1">
            </a-input>
          </a-form-item>
          <a-form-item class="codeBox" name="code">
            <div>
              <a-input v-model:value="formState.code" placeholder="请输入验证码">
              </a-input>
              <img
                  :src="verificationImg"
                  @click="checkImageCode"
                  class="image"
                  alt="刷新"
                />
            </div>
          </a-form-item>
          <a-form-item class="btnForm">
            <a-button
              type="primary"
              html-type="submit"
              class="formbtn"
            >
              查询
            </a-button>
          </a-form-item>
        </a-form>
</div>
</template>
import type { FormProps } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
const verificationImg = ref(null);
const userFlag = ref("");
interface FormState {
  layout: 'horizontal' | 'inline';
  user: string;
  code: string;
}
const formState: UnwrapRef<FormState> = reactive({
  layout:'inline',
  user: '',
  code: '',
});
let validateCode = (Rule: any, val: string) => {
  var params = {
    uuid: userFlag.value,
    text: val,
  };
  return new Promise<void>((resolve, reject) => {
    if (!val) {
      reject("请输入验证码");
    } else {
      validateImgCode1(params).then((res: any) => {
        if (res.errorCode !== 200) {
          reject(new Error(res.msg));
        } else {
          resolve();
        }
      }).catch(() => {
        reject(new Error("验证失败，请重试"));
      });
    }
  });
};
const rules: Record<string, Rule[]> = {
  code: [{ required: true, validator: validateCode, trigger: 'blur' }],
};
const checkImageCode = async () => {
    try {
      const response = await axios({
        method: "get",
        url: "/api/sys/captcha",
        responseType: "blob",
      })
      verificationImg.value = URL.createObjectURL(response.data);
      userFlag.value = response.headers['uuid'];
      console.log(userFlag.value);
      
    } catch (error) {
      console.error('Error fetching image:', error);
    }
  };
const handleFinish: FormProps['onFinish'] = values => {
  // console.log(values, formState);
  let params = {
    text:formState.code,
    uuid:userFlag.value
  }
  console.log(params);
  
};
const handleFinishFailed: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};