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 ; 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:
|
<<: Detailed explanation of the process of deleting the built-in version of Python in Linux
Written in front There are two ways to upgrade My...
@Font-face basic introduction: @font-face is a CSS...
JavaScript clicks to change the shape of the pict...
Given an array [1,8,5,4,3,9,2], write an algorith...
Install axios and implement communication Here we...
I used the dialog in closure and drew a dialog wit...
Solution: Bind the click event to the audio compo...
<!--[if lte IE 6]> <![endif]--> Visibl...
0. Overview Zabbix is an extremely powerful ope...
Preface Recently, a Java EE web project that has ...
Data Type: The basic rules that define what data ...
Preface The docker image cannot be deleted. Check...
Table of contents App Update Process Rough flow c...
Assuming business: View the salary information of...
Aggregating data from various sources allows the ...