1、安裝

npminstallvee-validate

2、配置

a、新建veevalidate.js儲存驗證資訊

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
// 引用中文提示  
import zh from 'static/js/zh_CN'  
Vue.use(VeeValidate, {  
  locale: 'zh'  
})  
Validator.addLocale(zh)    
Validator.extend('username', {  
  messages: {  
    zh: '請輸入大於15小於200'  
  },  
  validate: value => {  
  //大於15小於200
    return /^1[6-9]$|^[2-9]\d$|^1\d{2}$/.test(value)  
  }  
})

Validator.extend('passwordd', {  
  messages: {  
    zh: '請輸入大於10小於200'  
  },  
  validate: value => {  
    return /^1[1-9]$|^[2-9]\d$|^1\d{2}$/.test(value)  
  }  
})
const dict = {  
  zh: {  
    custom: {
    username:{
    required: '您還沒有填寫使用者名稱！'
    }, 
    passwordd:{
    required: '您還沒有輸入密碼！'
    }     
    }  
  }  
}
Validator.updateDictionary(dict)  

b、main.js引入

import 'static/js/veevalidate.js'

3、元件使用

<form @submit.prevent="submit">

<div class="con" v-show="ison">
     <ul class="login_ways_mt">
      <li>
        <input type="text" autofocus="autofocus"  v-validate="'required|username'" name="username" placeholder="使用者名稱/手機號/Email" v-model="userphoneemail">
          <p class="input_tip input_tip01">
            <span><img :src="imgsrc+'xiaosanjiao.png'"></span>
            <em>請填寫此欄位</em>                           
          </p>
      </li>
      <li>
        <input type="password" v-validate="'required|passwordd'"

placeholder="請輸入您的密碼" v-model="passwordd" name="passwordd">     //name要一致
          <p class="input_tip input_tip02">
            <span><img :src="imgsrc+'xiaosanjiao.png'"></span>
            <em>請填寫此欄位</em>
          </p>
      </li>
    </ul>
</div>

</form> 

submit(){
    var username=this.userphoneemail;
    var passwordd=this.passwordd;
    //不輸入驗證 無法自動獲取焦點  
    if(this.errors.has('username')||$("input[name='username']").val()==''){         
      $('.input_tip01 em').text(this.errors.first('username')); //驗證資訊顯示
      $('.input_tip01').show();
      setTimeout(function(){$('.input_tip01').hide()},1000)
      $("input[name='passwordd']").focus();
      return;
    }     
    if(this.errors.has('passwordd')||$("input[name='passwordd']").val()==''){ 
      alert(this.errors.has('passwordd')); //驗證資訊顯示
      $('.input_tip02 em').text(this.errors.first('passwordd'));
      $('.input_tip02').show();
      setTimeout(function(){$('.input_tip02').hide()},1000)
      $('.input_tip02').focus();
      return;
    }      
}