Vue3中使用useField如何验证输入框值而非组件modelValue？

你的问题核心是useField默认关联了组件的整个modelValue对象，但你需要验证的是对象里的value子属性，以下是几种可行的解决方式：

方式一：自定义字段的取值与赋值逻辑 #

通过useField的第三个配置参数，显式指定字段值的读取和更新规则，精准绑定输入框对应的modelValue.value：

<script setup>
import { useField } from 'vee-validate';
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ value: '', text: '' })
  }
});
const emit = defineEmits(['update:modelValue']);

// 定义验证规则
const rules = {
  required: '输入不能为空'
};

// 配置useField，指定读取和更新的是modelValue的value属性
const { errors, validate, resetField } = useField('test', rules, {
  getValue: () => props.modelValue.value,
  setValue: (newVal) => {
    emit('update:modelValue', { ...props.modelValue, value: newVal });
  }
});

// 用computed关联输入框的v-model，确保双向绑定正常
const inputValue = computed({
  get: () => props.modelValue.value,
  set: (val) => emit('update:modelValue', { ...props.modelValue, value: val })
});
</script>

<template>
  <div>
    <input v-model="inputValue" name="test" />
    <selectList />
  </div>
</template>

方式二：指定字段路径（结合useForm上下文） #

如果你的组件是在useForm的上下文下使用，可以直接通过字段路径指向modelValue的value子属性：

<script setup>
import { useForm, useField } from 'vee-validate';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ value: '', text: '' })
  }
});
const emit = defineEmits(['update:modelValue']);

const { handleSubmit } = useForm({
  initialValues: props.modelValue
});

// 直接指定要验证的字段为value（对应modelValue.value）
const { errors, value, validate } = useField('value', rules);

// 提交时同步更新父组件的modelValue
const onSubmit = handleSubmit((values) => {
  emit('update:modelValue', values);
});
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="value" name="value" />
    <selectList />
    <button type="submit">提交</button>
  </form>
</template>

方式三：拆分组件Props（可选） #

如果组件的使用场景允许，可以将原有的modelValue拆分为两个独立的Props：inputValue和inputText，这样输入框直接绑定inputValue，useField就能直接获取输入框的值，无需额外配置：

<script setup>
import { useField } from 'vee-validate';

const props = defineProps({
  inputValue: {
    type: String,
    default: ''
  },
  inputText: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:inputValue', 'update:inputText']);

const rules = {
  required: '输入不能为空'
};

const { errors, value, validate, resetField } = useField('test', rules, {
  getValue: () => props.inputValue,
  setValue: (newVal) => emit('update:inputValue', newVal)
});
</script>

<template>
  <div>
    <input v-model="value" name="test" />
    <selectList v-model="inputText" />
  </div>
</template>

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