正则验证手机号

正则验证手机号demo

1. template中定义标签框架

   手机号: <input type="text" 
   		v-model="Phone" 
   		oninput="if(value.length>11)value=value.slice(0,11)"
   		placeholder="请输入您的手机号"/>
   <Button color="blue" @click="reg()">注册</Button>
   

2. data中定义我们需要的变量

   data() {
         return {
           Phone: ''
         }
       },
   

3. methobs中定义方法

   reg() {
           //判断用户是否输入
           if (this.username === '' || this.password === '' || this.Phone === '') {
             this.$Message('请检查输入');
             return false
           } else {
             //正则判断手机号
             if (!(/^1[34578]\d{9}$/.test(this.Phone))) {
               this.$Message('手机号格式不正确');
               return false
             } else {
               this.axios.get(' http://127.0.0.1:8000/register/', {
                 params: {
                   username: this.username,
                   password: this.password,
                   phone:this.Phone
                 }
               })
                 .then(res => {
                   if (res.data.code === 200) {
                     this.$Message(res.data.msg)
                   } else {
                     this.$Message(res.data.msg)
                   }
                 })
             }
           }
         }
   

4. 最终效果