<template>
    <div style="width: 500px; float: right;">
      自定義驗證
      <input type="tel" v-model="username" name="username" v-validate="{regex : resg}" data-vv-name="username">
      <span v-if="errors.has('username')" style="height:40px; width: 100px; background: #7f7e7e; font-size: 16px;">請輸入正確的手機號</span>
    </div>
</template>

<script>
    export default {
        name: "text",
      $_veeValidate: {
        validator: 'new'
      },
      data(){
          return{
            popover:false,
            username:'',
            resg:/^(1[3|5|7|8]\\d{9})|([\\w.\\-]
 
[email protected](?:[a-z0-9]+(?:-[a-z0-9]+)*\\.)+[a-z]{2,3})$/
          }
      },
    }
</script>

<style scoped>
  input{ border: 1px solid #ccc;}
</style>

這是在vue專案中 自己簡單寫的自定義的驗證 

input中的name一定要設定名字 這個名字和daya-vv-name一樣的 v-validata這是驗證的條件 我是在data專用定義的一個驗證手機號的正則 下面的span則是一個提示資訊 電話號資訊不對的時候 會自動顯示提示錯誤資訊 而且errors.has後面的額名字要和input的name名字一樣