如何阻止VeeValidate自定义字段输入时自动校验

问题 #

表单全局配置了仅点击Submit按钮时校验（validateOnBlur: false、validateOnChange: false），默认<Field>组件正常工作，但自定义的<InputText>组件通过useField实现时，输入内容会立刻触发校验（meta.validated变为true），不符合预期。

修复方法 #

在自定义组件调用useField时，显式传入校验触发时机的配置，与全局设置保持一致：

修改InputText.vue的代码：

<template>
  <input v-model="value" type="text" />
  {{ meta.validated }}
  {{ meta.valid }}
</template>

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

const props = defineProps({
  name: String,
});

// 添加校验触发配置，关闭输入和失焦时的自动校验
const { value, meta } = useField(props.name, {
  validateOnBlur: false,
  validateOnChange: false,
});
</script>

原因说明 #

全局的configure配置不会自动覆盖useField的默认行为，useField默认会在字段值变化时触发校验，因此必须显式传入配置项，让自定义字段的校验逻辑和默认<Field>组件同步。

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