本篇内容主要讲解“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);
}
效果图:
到此,相信大家对“vue怎么实现验证码倒计时按钮”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。