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

How to upgrade MySQL 5.6 to 5.7 under Windows

Written in front There are two ways to upgrade My...

Basic usage of @Font-face and how to make it compatible with all browsers

@Font-face basic introduction: @font-face is a CSS...

JavaScript implements click to change the image shape (transform application)

JavaScript clicks to change the shape of the pict...

Implementation of communication between Vue and Flask

Install axios and implement communication Here we...

The button has a gray border that is ugly. How to remove it?

I used the dialog in closure and drew a dialog wit...

Using Zabbix to monitor the operation process of Oracle table space

0. Overview Zabbix is ​​an extremely powerful ope...

A bug fix for Tomcat's automatic shutdown

Preface Recently, a Java EE web project that has ...

MySQL data types full analysis

Data Type: The basic rules that define what data ...

Docker image cannot be deleted Error: No such image: xxxxxx solution

Preface The docker image cannot be deleted. Check...

A brief discussion on React native APP updates

Table of contents App Update Process Rough flow c...

Summary of three ways to implement ranking in MySQL without using order by

Assuming business: View the salary information of...

5 Tips for Protecting Your MySQL Data Warehouse

Aggregating data from various sources allows the ...