vue发送验证码倒计时,vue验证码怎么做
这篇文章主要为大家详细介绍了某视频剪辑软件实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现验证码倒计时按钮的具体代码，供大家参考，具体内容如下
1、点击“发送验证码”按钮后进行逻辑判断：
如果邮箱已输入且格式正确：按钮变为“已发送”,此时为不可点击状态并开始120s倒计时;
如果邮箱未输入或格式不正确：显示错误的提示信息。
2、120秒倒计时结束后按钮变为“重新发送验证码” 。
html:
div v-bind:class= { text _ email :处于活动状态， text_tip: isTip }{{tip}}/div //出错提示
div class=input
i class=ret_icon-email/i
投入
type=text
v-model=电子邮件
v-bind:class= { input _ email 0 :hasError }
v-on:click=cancelError
:placeholder=输入邮箱地址
id=输入邮件
/
br /
输入类型=text placeholder=输入验证码class=input_number /
button class= BTN号码 v-bind:class= { gray:wait _ timer 0 } @ click= get code()
跨度
数字_绿色
v-show=showNum
v-bind:class= { num:wait _ timer 0 }
{ {这个。等待计时器 } }/span
跨度
class=span_number
v-bind:class= { gray _ span:wait _ timer 0 }
{{ getCodeText() }}/span
/按钮
br /
/div
js:
data() {
返回{
提示： 用电子邮件找回密码，
isTip:假的，
isActive:没错，
假的，
wait_timer: false，
hasError:假的，
电子邮件：""
}
},
方法：{
取消错误：函数（事件){
this.hasError=false
this.isActive=true
this.isTip=false
this.tip=用电子邮件找回密码；
},
getCode: function() {
if (this.wait_timer 0) {
返回错误的
}
如果(!this.email) {
this.hasError=true
this.isActive=false
this.isTip=true
this.tip=电子邮件不能为空；
返回错误的
}
如果（
！/^([a-zA-Z0-9] [_\_\ .]?)*[a-zA-Z0-9]@([a-zA-Z0-9][_ \ _ \ .]?)*[阿-扎-Z0-9].[a-zA-Z]{2，3}$/.测试（
this.email
)
) {
this.hasError=true
this.isActive=false
this.isTip=true
this.tip=电子邮件地址无效；
返回错误的
}
this.showNum=true
this.wait _ timer=120
变那个=这个
var timer _ interval=setInterval(function(){
if (that.wait_timer 0) {
那个。wait _ timer-；
}否则{
清除间隔(timer _ interval)；
}
}, 1000);
//在这里调取你获取验证码的创建交互式、快速动态网页应用的网页开发技术
},
getCodeText: function() {
if (this.wait_timer 0) {
返回已发送；
}
if (this.wait_timer===0) {
this.showNum=false
返回重新发送验证码！
}
if (this.wait_timer===false) {
返回发送验证码！
}
},
}
css:ret _ icon电子邮件{
背景：网址（././assets/pics/mail . SVG)不重复；//图片为本地图片
宽度：20px
高度：20px
位置：绝对；
top:12px；
左：16px
}。输入_电子邮件0 {
边框：1px实心rgba(239，83，80，1)；
}。输入号码{
宽度：112像素
身高：44px
文本缩进：16px
右边距：12px
}。btn _编号{
宽度：154px
身高：44px
边框-半径：4px
框大小：边框-框；
边框：1px实心rgba(76，175，80，1)；
行高：16px
大纲：无；
}。span _编号{
颜色：rgba(76，175，80，1)；
}。btn_number.gray {
背景：rgba(242，244，245，1)；
边框：1px实心rgba(0，0，0，0.05)；
}。span_number.gray_span {
颜色：# 9 a9c 9 a；
}。num_green.num {
颜色：rgba(76，175，80，1)；
}
效果图：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。