useForm 官方文档

useForm 是一个可以独立 Form 组件运行的方法，它使用 Vue 响应式机制进行数据的监听和校验，并将校验结果返回，你可以将校验结果绑定到任何组件上，Form.Item 也仅仅是将结果展示。

因此，可以使用 useForm 实现单个表单控件的校验，而不借助于 Form、Form.Item 组件。

<template>
  <a-input
    style="width: 400px; margin-bottom: 10px"
    v-model:value="name"
    placeholder="username"
    @change="validateName"
  ></a-input>
  <!-- input 通过 change 时间去触发校验，还可以加防抖 -->
  <!-- 这里根据 name 字段的校验状态决定是否显示错误信息 -->
  <div v-if="validateInfos.name.validateStatus === 'error'" style="color: red">
    username valid
  </div>
  <a-input
    style="width: 400px; margin-bottom: 10px"
    v-model:value="password"
    placeholder="password"
  ></a-input>
  <br />
  <a-button type="primary" @click="submit">Submit</a-button>
</template>
<script>
import { reactive, toRefs, toRaw } from 'vue'
import { Form } from 'ant-design-vue'
const useForm = Form.useForm
export default {
  setup() {
    const formData = reactive({
      name: '',
      password: ''
    })
    const rules = reactive({
      name: [
        {
          message: 'username valid',
          pattern: /^([0-9a-zA-Z_-]+)$/,
          required: true
        }
      ]
    })
    // validate 校验方法，传入字段名可根据对应字段的规则进行校验
    // validateInfos 校验对象，包含所有字段的校验结果等
    const { validate, validateInfos } = useForm(formData, rules)
    const validateName = () => {
      // 指定校验 name 字段
      validate('name')
    }
    const submit = () => {
      // validate 不传字段名表示校验所有字段
      validate()
        .then(() => {
          console.log(toRaw(formData))
        })
        .catch((err) => {
          console.error('validate err: ', err)
        })
        .finally(() => {
          console.log('validateInfos: ', validateInfos)
        })
    }
    return {
      ...toRefs(formData),
      submit,
      validateInfos,
      validateName
    }
  }
}
</script>