使用VeeValidate v3结合CoreUI如何禁用失焦校验仅提交时触发？

VeeValidate v3 默认会绑定输入组件的 input、blur 事件作为自动校验触发源，不需要硬编码修改组件内部逻辑，通过官方配置项就能实现完全屏蔽失焦自动校验，调整点如下：

• 给每个 ValidationProvider 组件增加 events="" 属性，显式屏蔽所有内置的自动校验触发事件（包括失焦、输入过程的自动校验），后续只有手动调用 validate 方法时，才会执行对应字段的校验规则。
• 移除 ValidationObserver 上多余的 :disabled="true" 属性：这个属性的作用是临时禁用整个观察者下的所有校验逻辑，会连手动触发的提交校验一起拦截，删除后才能保证提交时的全量校验正常执行。
• 现有写的点击注册按钮时手动调用 this.$refs.form.validate() 的逻辑本身符合流程要求，调整完前面两个配置后即可正常工作，不需要额外修改。
• 按钮上绑定的:disabled="invalid" 不需要调整，因为屏蔽自动校验后，这个状态初始就是false，按钮不会因为未校验提前禁用，完全符合提交时才触发校验的预期。

关键修改代码示例 #

修改前的核心结构片段：

<ValidationObserver v-slot="{ invalid }" ref="form" :disabled="true">
  <CForm novalidate @submit.prevent="onSubmit" class="sign">
    <ValidationProvider name="FirstName" rules="required" v-slot="{ errors }">
      <CInput v-bind:class="{InputError:errors.length > 0}"
        label="FirstName"
        placeholder="First Name"
        :description="errors[0]"
        v-model="form.name.firstName" type="text"
      />
    </ValidationProvider>
    <ValidationProvider name="LastName" rules="required" v-slot="{ errors }">
      <CInput v-bind:class="{InputError:errors.length > 0}"
        label="LastName"
        placeholder="Last Name"
        :description="errors[0]"
        v-model="form.name.lastName" type="text"
      />
    </ValidationProvider>
  </CForm>
</ValidationObserver>

修改后的对应核心片段：

<!-- 移除Observer上的disabled属性 -->
<ValidationObserver v-slot="{ invalid }" ref="form">
  <CForm novalidate @submit.prevent="onSubmit" class="sign">
    <!-- 每个Provider增加events="" 属性屏蔽所有自动触发事件 -->
    <ValidationProvider 
      name="FirstName" 
      rules="required" 
      events=""
      v-slot="{ errors }"
    >
      <CInput v-bind:class="{InputError:errors.length > 0}"
        label="FirstName"
        placeholder="First Name"
        :description="errors[0]"
        v-model="form.name.firstName" type="text"
      />
    </ValidationProvider>
    <ValidationProvider 
      name="LastName" 
      rules="required" 
      events=""
      v-slot="{ errors }"
    >
      <CInput v-bind:class="{InputError:errors.length > 0}"
        label="LastName"
        placeholder="Last Name"
        :description="errors[0]"
        v-model="form.name.lastName" type="text"
      />
    </ValidationProvider>
  </CForm>
</ValidationObserver>

修改后的实际运行效果 #

• 用户在输入框键入内容、点击输入框外部失焦时，完全不会触发任何校验逻辑，不会提前弹出错误提示
• 用户点击注册按钮时，才会统一执行所有字段的校验规则，校验不通过的字段会正常显示对应的错误信息，全部校验通过后才会执行后续的注册接口请求
• 所有配置都是VeeValidate官方提供的稳定API，不需要修改CoreUI的CInput组件内部逻辑，后续版本升级也不会出现兼容性问题

踩坑提醒：

• 之前调试不生效的常见原因：一是只给部分输入框对应的Provider加了屏蔽配置，漏配的字段还是会触发失焦校验；二是没删掉Observer上多余的:disabled="true"，导致手动调用validate的逻辑被内部拦截，看起来像配置完全没起作用。
• 后续如果表单新增其他校验字段，一定要在对应的 ValidationProvider 上也补上 events="" 属性，避免漏配导致失焦校验复现。

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