vue中判断电话号码的正则及验证

<template>
    <div>
        <h1>{{msg}}</h1>
        <form action="" method="get" class="form">
            <div class="input">
                <input type="text" v-model="number" @input="isPhone()" maxlength="11" autofocus placeholder="请输入手机号码"> 
                <input type="button" @click="changeMsg" v-model="message" :disabled="disabled" >
                <div class="errorColor" v-show="isShow">电话号码输入有误，请重新输入</div>
                <div><input type="text" name="" id="" placeholder="请输入验证码"></div>
                <input type="submit" value="提交">
            </div>
            
            
            </form>
    </div>




</template>

<script>
    export default{
        data(){
            return{
                msg:"短信验证码",
                number:'',
                message:'发送验证码',
                disabled: true,
                time: 5,
                isShow: false,
            }
        },
        methods:{
            isPhone(){
               var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                if(this.number.length ==11){
                    if(!reg.test(this.number)){
                        this.isShow = true;
                    }else {
                        this.disabled = false;
                        console.log('电话号码输入正确！');
                    }
                }else {
                    this.disabled = true;
                    this.isShow = false;
                }
                // console.log(reg)
                
            },
            changeMsg(){
                
                this.disabled = true;
                this.message = this.time + 's后重新获取';
                var timer = setInterval(()=>{
                    this.time--;
                    this.time = this.time>=0?this.time:0;
                    this.message = this.time + 's后重新获取';
                    if(this.time == 0){
                        this.message = '重新获取';
                        this.disabled = false;
                        clearInterval(timer);
                        this.time = 5;
                    }
                },1000)
                
                
            }
        }
    }
</script>

<style scoped>
h1 {
    text-align: center;
}
.input {
    text-align: initial;
    width: 285px;
    margin: 0 auto;
}
.form {
    width: 100%;
    margin: 0 auto;
}
input {
    outline: none;
    margin-top: 20px;
    margin-right: 20px;
}
input::placeholder {
    text-indent: 10px;
}
input[type=text] {
    height: 30px;
    text-indent: 10px;
}
input[type=submit]{
    width: 100%;
    height: 30px;
    margin: 20px auto 0;
}
input[type=button] {
    display:inline-block;
    width:90px;
    height: 34px;
    margin-right:0;
}
.errorColor {
    color: red;
    margin-top: 10px;
}
</style>