这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现验证码倒计时按钮的具体代码，供大家参考，具体内容如下
1、点击“发送验证码”按钮后进行逻辑判断：
▶️ 如果邮箱已输入且格式正确：按钮变为“已发送” ，此时为不可点击状态 并开始120s倒计时；
▶️ 如果邮箱未输入或格式不正确：显示错误的提示信息。
2、120s倒计时结束后按钮变为“重新发送验证码” 。
html:
<div>{{tip}}</div> //出错提示 <div class="input"> <i class="ret_icon-email"></i><br /><button class="btn_number">0}" @click="getCode()"> <span class="num_green">0}">{{this.wait_timer + "s "}}</span><span class="span_number">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 { col<em>本文来源[email protected]搞@^&代*@码2网</em>or: rgba(76, 175, 80, 1); }
效果图：
以上就是vue实现验证码倒计时按钮的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现验证码倒计时按钮
转载请注明原文链接：vue实现验证码倒计时按钮
