使用vee-validate的表单提交问题：错误常显且提交无响应

问题分析 #

你遇到的错误消息始终显示、提交按钮无响应的问题，核心出在字段关联错误、验证触发时机未配置、表单默认提交未阻止这三个点上，同时也没实现blur时显示错误的需求。

具体修复步骤 #

1. 修复子组件的硬编码字段名 #

BaseInput和BaseSelect里的表单元素name属性不能硬编码，否则vee-validate无法正确关联字段。修改BaseInput：

<script setup>
const props = defineProps({
  modelValue: { type: [String, Number], default: "" },
  label: String,
  type: { type: String, default: "text" },
  error: {
    type: String,
    default: "",
  },
  name: { // 新增name属性，用于关联字段
    type: String,
    required: true
  },
});

const emit = defineEmits(["update:modelValue"]);

function updateValue(value) {
  emit("update:modelValue", value);
}
</script>

<template>
  <div>
    <label :for="props.name">{{ label }}</label>
    <input
      :name="props.name" <!-- 替换硬编码的name -->
      v-bind="$attrs"
      :type="props.type"
      :value="props.modelValue"
      @input="updateValue($event.target.value)"
    />
    <!-- 只有存在错误时才显示 -->
    <p v-if="error">{{ error }}</p>
  </div>
</template>

BaseSelect做同样修改：把硬编码的name换成props.name，并添加name prop。

2. 配置验证触发时机与字段关联 #

在父组件中，为useField指定blur触发验证，同时关联子组件的字段名：

<script setup>
const cars = [...];

// 保留你的验证函数
const required = (value) => {
  const requiredMessage = "This field is required!";
  if (value === undefined || value === null) return requiredMessage;
  if (!String(value).length) return requiredMessage;
  return true;
};

const minLength = (number, value) => {
   if (String(value).length < number) return `Please type at least ${number} characters`;
  return true;
};

const validationSchema = {
  name: (value) => {
    const req = required(value);
    if (req !== true) return req;
    const min = minLength(3, value);
    if (min !== true) return min;
    return true;
  },
  car: required,
};

// 配置useField，指定blur时验证，同时获取字段错误
const { value: name, error: nameError } = useField("name", {
  validateOn: "blur"
});
const { value: car, error: carError } = useField("car", {
  validateOn: "blur"
});

const { handleSubmit } = useForm({
  validationSchema,
});

const submit = handleSubmit((values) => {
  console.log('submit', values);
}, (failedValues) => {
  // 可选：捕获验证失败的情况
  console.log('validation failed', failedValues);
});
</script>

<template>
  <!-- 添加.prevent阻止表单默认提交行为 -->
  <form @submit.prevent="submit">
    <BaseInput
      v-model="name"
      type="text"
      name="name" <!-- 传递字段名 -->
      :error="nameError" <!-- 使用useField返回的错误 -->
      label="Name"
    ></BaseInput>
    <BaseSelect
      v-model="car"
      :cars="cars"
      name="car" <!-- 传递字段名 -->
      :error="carError"
      label="Select Car"
    ></BaseSelect>

    <button type="submit">Submit</button>
  </form>
</template>

3. 关键优化点说明 #

• 错误显示控制：子组件通过v-if="error"只在有错误时显示提示，避免初始状态下渲染空内容或undefined。
• 字段关联：子组件表单元素的name属性与useField的字段名完全一致，确保vee-validate能正确跟踪字段状态。
• 验证触发时机：validateOn: "blur"配置实现了失去焦点时才验证的需求，不会在页面加载时就触发验证。
• 表单提交拦截：@submit.prevent阻止浏览器默认提交行为，让handleSubmit能正常执行验证逻辑，无效数据会被自动拦截，不会进入提交回调。

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