Vue实战088：简单的验证码倒计时功能实现

这是个发送验证码时常用的功能，当用户点击【发送验证码】之后出现【重新获取60s后】。在倒计时期间禁止用户继续发送验证码，待倒计时结束之后才可以再次发送验证码。这个可以避免重复发送请求获取多个验证码信息（但是只有最后一次才是有效的），你也不知道自己发送了几次请求，当手机接收到验证码之后容易误以为是正确的验证码。所以做适当的控制是非常有必要的，同时也可以防止恶意发送请求消耗服务器资源。

HTML构建

为了方便这里我们用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实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：

<code>
    
  
  发送验证码

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 }
    })
},/<code>