VueJS 3 + vee-validate 4.7.3：独立字段校验与按钮显隐问题

解决方案1：使用useForm钩子（推荐） #

vee-validate的useForm钩子可获取表单上下文，通过getFieldMeta方法直接拿到指定字段的校验元信息，完美适配Form外部的状态判断需求。

修改后的完整代码：

<template>
  <Form :validateOnModelUpdate="true">
    <Field name="mobile" as="input" :rules="mobileRules" v-model="mobile" />
    <!-- 可选：显示字段错误提示 -->
    <span class="error" v-if="getFieldMeta('mobile').error">
      {{ getFieldMeta('mobile').error }}
    </span>
  </Form>

  <!-- 根据校验状态控制按钮显示 -->
  <button class="btn btn-default" v-if="isMobileValid">下一步</button>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Form, Field, useForm } from 'vee-validate';
import * as Yup from 'yup';

const mobile = ref('');
// 定义校验规则，可添加自定义错误提示
const mobileRules = Yup.string().required('手机号不能为空').min(6, '手机号长度不能少于6位');

// 获取表单上下文
const { getFieldMeta } = useForm();

// 计算属性：判断字段是否有效（已触发表单校验且无错误）
const isMobileValid = computed(() => {
  const fieldMeta = getFieldMeta('mobile');
  // 若不需要用户触发输入就判断，可去掉`fieldMeta.touched`
  return fieldMeta.valid && fieldMeta.touched;
});
</script>

解决方案2：通过Form组件的ref访问字段状态 #

如果不想使用useForm，可以给Form添加ref，直接访问内部的字段实例：

<template>
  <Form ref="formRef" :validateOnModelUpdate="true">
    <Field name="mobile" as="input" :rules="mobileRules" v-model="mobile" />
  </Form>

  <button class="btn btn-default" v-if="isMobileValid">下一步</button>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';

const mobile = ref('');
const mobileRules = Yup.string().required().min(6);
const formRef = ref(null);

const isMobileValid = computed(() => {
  if (!formRef.value) return false;
  const field = formRef.value.getField('mobile');
  return field?.meta.valid && field?.meta.touched;
});
</script>

为什么之前的方法失效？ #

• useField钩子必须在Form组件的上下文范围内执行（比如Form的子组件中），直接在父组件setup中调用会因为字段未被Form注册而报错。
• Field组件的ref无法直接获取meta信息，因为这些状态被vee-validate内部封装，不对外暴露。

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