vue实现验证码倒计时按钮

本文实例为大家分享了vue实现验证码倒计时按钮的具体代码，供大家参考，具体内容如下

1、点击“发送验证码”按钮后进行逻辑判断：

▶️ 如果邮箱已输入且格式正确：按钮变为“已发送” ，此时为不可点击状态 并开始120s倒计时；
▶️ 如果邮箱未输入或格式不正确：显示错误的提示信息。

2、120s倒计时结束后按钮变为“重新发送验证码” 。

html:

<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }">{{tip}}</div> //出错提示
<div class="input">
   <i class="ret_icon-email"></i>
   <input
     type="text"
     v-model="email"
     v-bind:class="{ 'input_email0' : hasError }"
     v-on:click="cancelError"
     :placeholder="输入邮箱地址"
     id="inputEmail"
   />
   <br />
   <input type="text" placeholder="输入验证码" class="input_number" />
   <button class="btn_number" v-bind:class="{gray:wait_timer>0}" @click="getCode()">
       <span
         class="num_green"
         v-show="showNum"
         v-bind:class="{num:wait_timer>0}"
       >{{this.wait_timer + "s "}}</span>
       <span
         class="span_number"
         v-bind:class="{gray_span:wait_timer>0}"
       >{{ getCodeText() }}</span>
   </button>
   <br />
</div>

js:

data() {
   return {
     tip: "用Email找回密码",
     isTip: false,
     isActive: true,
     showNum: false,
     wait_timer: false,
     hasError: false,
     email: ""
   }
},
methods: {
   cancelError: function(event) {
     this.hasError = false;
     this.isActive = true;
     this.isTip = false;
     this.tip = "用Email找回密码";
   },
   getCode: function() {
     if (this.wait_timer > 0) {
       return false;
     }
     if (!this.email) {
       this.hasError = true;
       this.isActive = false;
       this.isTip = true;
       this.tip = "Email不能为空";
       return false;
     }
     if (
       !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
         this.email
       )
     ) {
       this.hasError = true;
       this.isActive = false;
       this.isTip = true;
       this.tip = "Email地址无效";
       return false;
     }
     this.showNum = true;
     this.wait_timer = 120;
     var that = this;
     var timer_interval = setInterval(function() {
       if (that.wait_timer > 0) {
         that.wait_timer--;
       } else {
         clearInterval(timer_interval);
       }
     }, 1000);

//在这里调取你获取验证码的ajax
   },
   getCodeText: function() {
     if (this.wait_timer > 0) {
       return "已发送";
     }
     if (this.wait_timer === 0) {
       this.showNum = false;
       return "重新发送验证码！";
     }
     if (this.wait_timer === false) {
       return "发送验证码！";
     }
   },
}

css:

.ret_icon-email {
 background: url(../../assets/pics/email.svg) no-repeat; //图片为本地图片
 width: 20px;
 height: 20px;
 position: absolute;
 top: 12px;
 left: 16px;
}
.input_email0 {
 border: 1px solid rgba(239, 83, 80, 1);
}
.input_number {
 width: 112px;
 height: 44px;
 text-indent: 16px;
 margin-right: 12px;
}
.btn_number {
 width: 154px;
 height: 44px;
 border-radius: 4px;
 box-sizing: border-box;
 border: 1px solid rgba(76, 175, 80, 1);
 line-height: 16px;
 outline: none;
}
.span_number {
 color: rgba(76, 175, 80, 1);
}
.btn_number.gray {
 background: rgba(242, 244, 245, 1);
 border: 1px solid rgba(0, 0, 0, 0.05);
}
.span_number.gray_span {
 color: #9a9c9a;
}
.num_green.num {
 color: rgba(76, 175, 80, 1);
}

效果图：

来源：https://blog.csdn.net/Bule_daze/article/details/98205784