vue实现验证码倒计时按钮
作者:莫亓 发布时间:2024-04-09 10:49:05
标签: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);
}
效果图:
来源:https://blog.csdn.net/Bule_daze/article/details/98205784
0
投稿
猜你喜欢
- 1、有了已经训练好的模型参数,对这个模型的某些层做了改变,如何利用这些训练好的模型参数继续训练:pretrained_params = to
- class ascii{function decode($str){ preg_match_all( &
- 0.摘要在Python中,尤其是数组当中,对于一些异常值往往需要进行特殊处理。为了防止异常值与正常数据混淆,影响最终计算结果,常用的方法是将
- 工作中我们经常要两段代码的区别,或者需要查看接口返回的字段与预期是否一致,如何快速定位出两者的差异?除了一些对比的工具比如Beyond Co
- 在使用列表、数组和矩阵的过程中,经常需要相互转换。特此总结相互间转换的过程及结果,供大家参考。第三方包:numpy
- python 批量添加的button 使用同一点击事件根据传递的参数进行区分。def clear_text():print '我只是
- 英文文档:vars([object])Return the __dict__ attribute for a module, class,
- 【人工智能项目】Python Flask搭建yolov3目标检测系统后端代码from flask import Flask, request
- 最近在写laravel的时候遇到一个定时器的问题手动的执行 php /usr/share/nginx/html/mylaravel/arti
- 安装完MySQL以后会自动创建一个root用户和一个匿名用户,对于root大家都非常注意,而这个匿名用户很多人都会忽略,大概是因为匿名用户默
- 源码下载:http://xiazai.aspxhome.com/201509/yuanma/drag_sort1(aspxhome.com)
- 使用 filters 实现 英文字母 转大写1、template :<di
- 废话不多说,直接上代码create database mydbuse mydbgocreate table account( i
- 在整个产品设计的过程中,视觉设计与交互设计的“工序”非常紧密,两者关系也是相辅相成,互相影响。而视觉界面作为最直接与用户交流的层面,如何把交
- 不少需要用到sql2005的程序,有很多新手还是会操作,这里写个详细的图文教程送个菜鸟们,高手请飘过。适用于独立主机的朋友使用,如果你还没安
- 我就废话不多说了,大家还是直接看代码吧!# python输入一个水仙花数(三位数) 输出百位十位个位"""从控
- pip是一个很好用的第三方库安装方式,但是默认的源没法连接,就算有时候可以成功率也很低,所以换成国内镜像源比较方便。将pip源更换到国内镜像
- vuex状态刷新网页时数据被清空问题vuex状态管理,在网页刷新数据被清空的解决方法。在main.js中写入下面的代码段(亲测有效)//刷新
- 一、首先进入官网https://www.python.org/1.点击Downloads 如图显示3.91 点击2.双击安装程序,进入下面的
- 要将xian80地理坐标系转换成投影坐标系:xian1980 = """GEOGCS["GCS_Xi