验证码 倒计时 html + vue 很简单,CV大法走起


//html


{{msgText}}

const regPhone = /^1[3456789]\d{9}$/
//数据
data:{
   phone: null
  msgCode: null,
  msgNumFlag: 60,
  msgNumber: 60,
  msgText: '获取验证码',
}//方法
sendMsg(){
    if(this.msgNumber < this.msgNumFlag){
        return
    }
    if(!this.phone){
       alert('请输入手机号')
        return
    }
    if(!(regPhone.test(this.phone))){
        alert('请输入正确的手机号')
        return
    }
    // 自行添加ajax或axios
    let inter = setInterval(()=>{
        this.msgNumber -= 1
        this.msgText = this.msgNumber+'秒'
        if(this.msgNumber <= 0){
       clearInterval(inter)
       this.msgNumber = this.msgNumFlag
       this.msgText = '获取验证码'
        }
    }, 1000)
}