Vue实现获取验证码60秒倒计时与正则表达式校验手机号码

最新推荐文章于 2024-06-11 07:57:19 发布

m0_72875065

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量414

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_49519738/article/details/109045266

版权

Vue 专栏收录该内容

1 篇文章 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>

   
   
   
   1
2
3
4
5
6
7

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('手机号码格式不正确');
   }
}

   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

代码个人简单分析：

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