Vue实现获取验证码60秒倒计时

vue 专栏收录该内容
13 篇文章 0 订阅

效果如下图:(嘘,页面写的有点简陋,看效果!)
在这里插入图片描述

在这里插入图片描述

html:

<!--手机号输入框-->
<div class="login_box">
    <input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/>
    <span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</span>
<!-- 倒计时 -->
    <span v-if="!codeShow" class="count">{{count}}秒后重试</span>
</div>

js:

data() {
   return {
      codeShow: true,
      count: '',
      timer: null,
      mobile: "",  //手机号
   };
},
getPhoneCode() {  //获取短信验证码
   var Reg = /^[1][34578][0-9]{9}$/;
   // 正则验证
   if (Reg.test(this.mobile)) {
      this.$toast('验证码发送成功');
      const TIME_COUNT = 60;
      if (!this.timer) {
         this.count = TIME_COUNT;
         this.codeShow = false;
         this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
               this.count--;
            } else {
               this.codeShow = true;
               clearInterval(this.timer);
               this.timer = null;
            }
         }, 1000)
      }
      let code = {
         mobile: this.mobile,
         sms_type: "login"
      }
      getSmsCode(code).then(res => {
         console.log(res)
      })
   } else {
      this.$toast('手机号码格式不正确');
   }
}

代码个人简单分析:

在通过手机号和验证码进行登录时,点击获取验证码,判断手机号的格式是否正确,如果正确,就调用获取验证码的接口,传递两个参数,一个是手机号,一个是codeType类型,根据接口需要 判断code值是否等于200,然后设置一个倒计时,一般为60秒,在这60秒之内不能再次点击获取验证码。获取完之后再进行登录的一些其他操作。

  • 4
    点赞
  • 2
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值