vee-validate的使用

配置 vee-validate

//引入vue
    import Vue from 'vue';
//引入 vee-validate
    import VeeValidate from 'vee-validate';
//引入zh-CN
    import zh_CN from 'vee-validate/dist/locale/zh_CN'
//声明使用
    Vue.use(VeeValidate)
//js使用方式，指定语言、修改默认提示，添加自定义验证
VeeValidate.Validator.localize('zh_CN',{  
    // 设置了这个之后提示信息会变成中文的 
     messages:zh_CN.messages,  
    // 属性的提示信息    
     attributes:{    phone:'手机号码'  }
});
//自定义的扩展方法
VeeValidate.Validator.extend('phone2',{ 
    // field 会拿到上面的那个phone的值 
     getMessage:(field)=>'请输入正确的'+field, 
     validate:(value)=>{  
      //正则   
     return /[1]\d{10}/.test(value);  }  
});

使用：

<input type="tel" maxlength="11" placeholder="手机号" 
       v-model="phone" name="phone" v-validate="'required|phone2'"/>
<span v-show="errors.has('phone')" style="color: red;font-size: 12px;">
        {{ errors.first('phone') }}
</span>
<!-- 如果输入了正确的手机号  则这个按钮变亮   并且中间的内容变成已发送 --> 
<button :disabled="!isRight||times>0" class="get_verification" :class="{isblack:isRight}" 
        @click.prevent="sendCode">     {{times>0?'已发送'+`${times}`+'s':'获取验证码'}} </button>

export default{
data(){
    return {
        phone : '',
        times:0,
    }
},
  computed:{    //获取到当期输入的手机号 this.phone   进行校验   返回一个布尔值    isRight(){      return /[1]\d{10}/.test(this.phone);    },  },
  methods:{    //输入手机号发送验证码    sendCode(){      //倒计时的时间  把它放到this实例上  上面好获取到当前的这个times      this.times = 30;      this.timeId = setInterval(()=>{        this.times--;        if(this.times <=0 ){          this.times = 0;          clearInterval(this.timeId)        }      },1000)    }  } }

}

效果