本篇内容主要讲解“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
