欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现验证码倒计时按钮

程序员文章站 2022-06-22 08:50:21
本文实例为大家分享了vue实现验证码倒计时按钮的具体代码,供大家参考,具体内容如下1、点击“发送验证码”按钮后进行逻辑判断:▶️ 如果邮箱已输入且格式正确:按钮变为“已发送”...

本文实例为大家分享了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);
}

效果图:

vue实现验证码倒计时按钮

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。