登录(实时验证手机格式、验证码)

迷南。 2021-07-24 19:21 510阅读 0赞

思路:
    动态验证手机号格式:
    	利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model，在
    	计算属性中,利用正则不断检验手机格式,正确返回true
    	
    验证码:
    	当手机号格式正确时,点击才有效,利用时间制造三元运算符改变验证码的文本内容,且倒计时期间,再次点击无效

代码示例:

<template>
      <div class='login'>
        <p @click='$router.back()'><</p>
    
        <div class='md'>
          <p>Jeff外卖</p>
          <div class='linfo'>
          
          //验证手机号
        <div v-show='flag'>
          <div class='mp'>
            <span>手机号</span>
            <input type="text" placeholder="" v-model="phone">
            <span :class='{rphone:right_phone}' @click='getNum'>{ { time?'剩下'+time+'秒':'获取验证码'}}</span>
            	//利用time是否为0动态显示内容
            	//利用计算属性,添加符合时的验证码样式
          </div>
          <div class='mp2'>
            <span>验证码</span>
            <input type="text">
          </div>
        </div>
    
    
    
    
    
          </div>
      </div>
    </template>
    
    <script>
      import Vue from 'vue';
      import {  Switch } from 'vant';
    
      Vue.use(Switch);
    
      export default{ 
        data()
        { 
          return{ 
              flag:true,
              checked:false,
              type:'password',
              phone:'',
              time:0, //倒计时
              timeFlag:true  //是否能够再次发送验证码
          }
        },
        methods:{ 
          getNum()
          { 
    
            if(this.right_phone) //调用计算属性,点击时是否能够触发验证码
            {  
              if(this.timeFlag)  //倒计时期间的旗帜
              { 
                this.timeFlag=false;
                this.time=60;
                let timer=setInterval(()=>{ 
    
                  this.time--;
                  if(this.time==0)
                  { 
                    this.timeFlag=true;
                    clearInterval(timer);
                  }
                },1000)
              }
    
            }else{ 
              alert('请输入正确手机号');
            }
          }
        },
        computed:{  //计算属性动态验证手机号,其中手机号v-model双向绑定
          right_phone()
          { 
            return /^1\d{ 10}$/.test(this.phone) //正则匹配是否11个数字,返回布尔值
          }
        }
    
      }
    </script>
    
    <style lang='less'>
    
    
        .mlog{ 
          margin-top: 20px;
          text-align: start;
          .mp{ 
            width: 100%;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
            margin-bottom: 20px;
            >span:last-child{ 
              color:#ccc;
              margin-left: -40px;
    
            }
            border: solid 1px #ccc;
            >input{ 
              border: none;
            }
            .rphone{   //手机号格式正确时的验证码样式
              color:black !important;
    
            }
          }
          
    
    }
    </style>

效果图:  
![在这里插入图片描述][20200526221607290.png]

[20200526221607290.png]: /images/20210724/106e6f0cb30d4b8eb4404fe704253a8a.png