这是个发送验证码时常用的功能,当用户点击【发送验证码】之后出现【重新获取60s后】。在倒计时期间禁止用户继续发送验证码,待倒计时结束之后才可以再次发送验证码。这个可以避免重复发送请求获取多个验证码信息(但是只有最后一次才是有效的),你也不知道自己发送了几次请求,当手机接收到验证码之后容易误以为是正确的验证码。所以做适当的控制是非常有必要的,同时也可以防止恶意发送请求消耗服务器资源。
为了方便这里我们用ElementUI来实现,在el-form-item中利用el-button按钮来实现验证码发送。发送验证码之后直接在el-button上修改现实中在HTML中的【发送验证码】内容,利用disabled属性来控制el-button的是否可以点击。
定义一个retrieve()方法开启倒计时功能,利用setInterval计时器每隔一秒钟调用一次函数,当倒计时结束时通过clearInterval()来关闭计时器。这里我们需要做的是刷新时间和重定义el-button中的HTML内容,disable是用来控制el-button按钮是否可点击的属性。注意:disabled属性别用this.$refs.onConfirm.disbaled=true来定义,会报警告的:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"。
在发送之前我们需要对表单中的数据进行校验,这里为什么要嵌套两个validateField呢(validateField支持校验组数)?。因为validateField校验子表单数据时每校验一个值都会返回校验结果,当校验不通过时Error返回值为校验的提示信息,当通过时Error的值为空,所以我们在if语句中用(!Error)表示校验通过。那么这就存在一个问题如果校验数组的话就会进行多次校验,也就会发送多次验证请求。(点一次请求却收到多条验证码这显然是不合理的!)
这里主要的就是retrieve()方法的定义和动态改变HTML内容,可以利用Vue提供的$ref来快速的定位DOM元素实现属性的修改。以上内容是小编给大家分享的【Vue实战088:简单的验证码倒计时功能实现】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:
为了方便学习,下面附上本文用到的源码:
发送验证码
retrieve(){
this.timer= 10
var that = this;
console.log(that.$refs.onConfirm)
var timer_interval = setInterval(function(){
if(that.timer > 0 ){
that.timer -- ;
that.disable=true
that.$nextTick(()=>{
that.$refs.onConfirm.$el.children[0].innerHTML= "重新获取"+that.timer+"s"
})
}else{
clearInterval(timer_interval);
that.$refs.onConfirm.$el.children[0].innerHTML= "重新获取"
that.disable=false
}
},1000);
}
sendCode() {
this.$refs.rulesForm.validateField('userid',(error)=>{
if(!error){
this.$refs.rulesForm.validateField('tel',(error)=>{
if(!error){
return new Promise((resolve, reject) => {
SendCode(this.userForm).then(res=>{
if(res.data){
this.retrieve()
this.phoneCode=res.data.message
this.$message({
message:'验证码已发送,请注意查收!',
type: 'success'
})
}
resolve()
}).catch( error => { reject(error) } )
})}
})
}else{ return }
})
},
页面更新:2024-03-15
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号