Vue implements verification code countdown button

Vue implements verification code countdown button

This article example shares the specific code of Vue to implement the verification code countdown button for your reference. The specific content is as follows

1. Click the "Send Verification Code" button and perform logical judgment:

▶️ If the email address has been entered and the format is correct: the button changes to "Sent" , which is unclickable and starts a 120s countdown ;
▶️ If the email address is not entered or the format is incorrect: an error message will be displayed.

2. After the 120s countdown ends, the button changes to "Resend verification code" .

html:

<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }">{{tip}}</div> //Error prompt<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="Enter your email address" 
      id="inputEmail"
    />
    <br />
    <input type="text" placeholder="Enter verification code" 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: "Retrieve password via 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 = "Retrieve password via 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 cannot be empty";
        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 address is invalid";
        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);

      //Call the ajax here to get the verification code
    },
    getCodeText: function() {
      if (this.wait_timer > 0) {
        return "Sent";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "Resend verification code!";
      }
      if (this.wait_timer === false) {
        return "Send verification code!";
      }
    },
}

css:

.ret_icon-email {
  background: url(../../assets/pics/email.svg) no-repeat; //The picture is a local picture 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);
}

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue implements mobile phone number and verification code login (60s countdown disabled)
  • Implementing 60s countdown function of image verification code based on Vue
  • Vue implements countdown to get verification code effect
  • Vue gets the verification code countdown component
  • Vue verification code 60 seconds countdown function simple example code
  • Vue implements the countdown function of the verification code button
  • Simple implementation of the 60-second countdown function of the vue verification code
  • SMS verification code countdown demo based on vue
  • Vue writes a simple countdown button function

<<:  Detailed explanation of the process of deleting the built-in version of Python in Linux

>>:  Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15

Recommend

Vue implements the browser-side code scanning function

background Not long ago, I made a function about ...

The difference between div and span in HTML (commonalities and differences)

Common points: The DIV tag and SPAN tag treat som...

Issues and precautions about setting maxPostSize for Tomcat

1. Why set maxPostSize? The tomcat container has ...

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles After going around in ...

Detailed explanation of how to use Docker-Compose commands

You can manage and deploy Docker containers in a ...

W3C Tutorial (3): W3C HTML Activities

HTML is a hybrid language used for publishing on ...

Example of using Nginx reverse proxy to go-fastdfs

background go-fastdfs is a distributed file syste...

Detailed steps to install Sogou input method on Ubuntu 20.04

1. Install Fcitx input framework Related dependen...

14 Ways to Create Website Content That Engages Your Visitors

When I surf the Net, I often see web sites filled...

Zabbix's psk encryption combined with zabbix_get value

Since Zabbix version 3.0, it has supported encryp...