关于vee-validate自定义验证

<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.\\-]+@(?:[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名字一样