本文例項為大家分享了實現驗證碼倒計時按鈕的具體程式碼，供大家參考，具體內容如下

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 />
<www.cppcns.com
 
;/div>

:

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 (th
 
is.wait_timer === false) {
        return "傳送驗證碼！";
      }
    },}

:

.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: borderwww.cppcns.com
 
-box;
  border: 1px solid rgba(76,175,1);
  line-height: 16px;
  outline: none;
客棧}
.span_number {
  color: rgba(76,1);
}
.btn_number.gray {
  background: rgba(242,244,245,1);
  border: 1px solid rgba(0,0.05);
}
.span_number.gray_span {
  color: #9a9c9a;
}
.num_grehCGDHLVTen.num {
  color: rgba(76,1);
}

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。