如何判断Vuetify的v-text-field是否处于成功状态（或验证规则未通过）

我有一个包含v-text-field的组件，组件支持通过props配置输入字段的验证规则。我希望当输入值通过所有验证规则（进入成功状态）时，自动调用指定函数。

示例代码如下：

<template>
  <v-app>
    <v-main>
      <v-text-field v-model="msg"
                    :rules="[ v => v.length > 0 || '必填项']"
                    @update:model-value="onInput"
      />
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(newValue) {
  if(true /* 需判断text-field是否处于验证成功状态 */) {
    console.log(newValue);
  }
}
</script>

我在Vuetify文档中没找到对应的事件，而且不想重复执行所有规则函数，请问该如何检查字段是否通过了全部验证？

解决方案 #

方法1：直接访问输入组件的内部验证状态

给v-text-field添加ref引用，直接读取组件内置的valid属性——该属性会自动同步验证结果，无需手动执行规则：

<template>
  <v-app>
    <v-main>
      <v-text-field ref="inputRef"
                    v-model="msg"
                    :rules="[ v => v.length > 0 || '必填项']"
                    @update:model-value="onInput"
      />
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')
const inputRef = ref(null)

function onInput(newValue) {
  // 验证通过时valid为true
  if (inputRef.value?.valid) {
    console.log('验证通过，值为:', newValue);
  }
}
</script>

方法2：结合v-form管理验证状态

如果输入控件属于表单的一部分，可借助v-form的全局验证能力，监听表单的状态变化：

<template>
  <v-app>
    <v-main>
      <v-form ref="formRef" @update:model-value="handleFormChange">
        <v-text-field v-model="msg"
                      :rules="[ v => v.length > 0 || '必填项']"
        />
      </v-form>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')
const formRef = ref(null)

function handleFormChange() {
  if (formRef.value?.valid) {
    console.log('表单所有控件验证通过，当前输入值:', msg.value);
  }
}
</script>

这种方式更适合多输入控件的场景，表单会自动汇总所有子控件的验证结果。

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