如何在Vuetify校验文本域中手动展示自定义校验提示信息

这个需求完全可以实现，Vuetify的表单输入组件原生提供了对应属性支持自定义校验提示展示，两种常用实现方案如下：

方案1：使用error-messages属性直接绑定自定义提示 #

Vuetify的v-text-field等输入组件原生提供error和error-messages属性，你可以将二者绑定到响应式变量，后端返回无结果时直接赋值错误状态和提示文本即可，提示会直接展示在原有的校验提示区域，和常规校验提示的展示样式完全一致。
示例代码参考：

<template>
  <v-form ref="searchForm" @submit.prevent="handleSearch">
    <v-text-field
      v-model="searchId"
      :rules="regularRules"
      label="搜索ID"
      :error="showCustomError"
      :error-messages="customErrorTip"
      append-inner-icon="mdi-magnify"
      @click:append-inner="handleSearch"
    ></v-text-field>
  </v-form>
</template>

<script setup>
import { ref } from 'vue'
const searchId = ref('')
const showCustomError = ref(false)
const customErrorTip = ref('')
// 原有正则校验规则
const regularRules = [
  v => !!v || 'ID不能为空',
  v => /^[A-Z0-9]{6,12}$/.test(v) || 'ID格式不符合要求'
]

const handleSearch = async () => {
  // 先执行前端常规校验
  const isValid = await $refs.searchForm.validate()
  if (!isValid) return
  // 校验通过后先清空历史自定义错误
  showCustomError.value = false
  customErrorTip.value = ''

  // 发起post请求查询数据
  const res = await yourSearchApi({ id: searchId.value })
  if (res.hasMatch) {
    // 匹配成功的跳转逻辑
  } else {
    // 无匹配结果时赋值自定义错误
    showCustomError.value = true
    customErrorTip.value = 'ID不存在'
  }
}
</script>

方案2：将异步查询逻辑写入校验规则 #

Vuetify的表单规则本身支持异步校验，你可以直接在原有规则数组中新增异步校验项，校验不通过时直接返回「ID不存在」的提示即可，不需要额外维护错误状态变量，Vuetify会自动处理错误展示：

const regularRules = [
  v => !!v || 'ID不能为空',
  v => /^[A-Z0-9]{6,12}$/.test(v) || 'ID格式不符合要求',
  // 新增异步校验规则
  async v => {
    const res = await yourSearchApi({ id: v })
    return res.hasMatch || 'ID不存在'
  }
]

如果选择这种方案建议配合手动调用表单validate()方法使用，避免用户输入过程中频繁触发异步请求。

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