登录(实时验证手机格式、验证码)-蒲公英云

迷南。 2021-07-24 19:21 584阅读 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>