Laravel 5.6.7+Vue.js中vee-validate表单加载即显验证错误问题

嘿，这个问题我之前也碰到过！vee-validate 默认会在组件挂载完成后立即验证字段，尤其是当你的字段初始值为空还设置了required规则时，就会直接弹出错误提示。另外看你的代码，input标签还缺个name属性，这会导致错误信息和字段的关联容易出问题，得补上。

给你几个可行的解决方案：

1. 给单个字段禁用即时验证（最推荐） #

把原来的data-vv-rules改成对象配置，加上immediate: false，这样只有用户和字段交互（比如输入内容、点击提交）时才会触发验证。同时补上name属性和错误提示里的字段名对应：

<template>
  <div>
    <form role="form">
      <input 
        v-validate="{ required: true, immediate: false }" 
        type="text" 
        v-model="UpdateForm.First_Name"
        name="First Name"
      >
      <p v-if="errors.has('First Name')">{{ errors.first('First Name') }}</p>
      <button type="button"> Update Profil...</button>
    </form>
  </div>
</template>

2. 全局设置验证触发时机 #

如果希望所有表单都只在提交时才验证，可以在初始化vee-validate的时候改全局配置：

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate, {
  events: 'submit', // 仅在提交表单时触发验证
  inject: true
});

3. 手动触发验证（更灵活） #

要是你需要完全掌控验证时机，比如点击按钮时才验证，可以手动调用验证方法：

<template>
  <div>
    <form role="form" ref="updateForm">
      <input 
        v-validate="'required'" 
        type="text" 
        v-model="UpdateForm.First_Name"
        name="First Name"
      >
      <p v-if="errors.has('First Name')">{{ errors.first('First Name') }}</p>
      <button type="button" @click="submitForm"> Update Profil...</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    async submitForm() {
      // 验证指定字段，或者用validateAll()验证整个表单
      const isValid = await this.$validator.validateAll('First Name');
      
      if (isValid) {
        // 验证通过，执行你的更新逻辑
        console.log('可以提交数据啦～');
      } else {
        console.log('表单填错啦，看看提示！');
      }
    }
  }
}
</script>

核心就是通过immediate: false或者全局配置，阻止vee-validate在页面加载时就自动跑验证，这样就能避免一开始就显示错误啦！

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