基于VUE3 API 用TS实现validateField

在 Vue 3 中，可以使用 `useForm` 函数创建一个表单实例，然后通过 `validate` 方法进行验证。以下是一个 TypeScript 实现的 `validateField` 函数示例代码：

import { Ref } from 'vue';
import { Form, RuleObject } from 'ant-design-vue';
import validator from 'async-validator';

interface FormInstance {
  form: Form;
  validate: (nameList?: string[]) => Promise<boolean | RuleObject[]>;
}

const validateField = async (form: Ref<FormInstance | undefined>, fieldName: string) => {
  if (!form.value) return;

  const fieldRules = form.value.form.getFieldRules(fieldName);
  const validatorInstance = new validator({ [fieldName]: fieldRules });

  const fieldValue = form.value.form.getFieldValue(fieldName);
  const validationErrors = await validatorInstance.validate({ [fieldName]: fieldValue });

  return validationErrors;
}

此函数接收两个参数，`form` 表示表单实例的 Ref 对象，`fieldName` 表示需要验证的字段名称。函数内部通过 `getFieldRules` 方法获取到该字段的验证规则，然后创建一个 `async-validator` 实例，并传入验证规则。接着通过 `getFieldValue` 方法获取到字段值，最后调用实例的 `validate` 方法进行验证，返回验证结果。可以根据返回结果判断验证是否通过。需要注意的是，这里使用了 `Ref` 对象来持有表单实例，因为表单实例是响应式的对象，直接传递可能会导致更新不及时。