vue验证码倒计时按钮 vue实现验证码倒计时按钮
莫亓 人气:0想了解vue实现验证码倒计时按钮的相关内容吗,莫亓在本文为您仔细讲解vue验证码倒计时按钮的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue验证码倒计时按钮,vue验证码倒计时,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); }
效果图:
加载全部内容