vue-获取验证码

image.png

<el-col :span="16"><el-input placeholder="请输入手机号码" v-model="innerVisibleForm2.PhoneNum2"></el-input></el-col>
<el-col :span="16" v-show="verShow"><el-button @click="GetCode()" type="primary">获取验证码</el-button></el-col>
<el-col :span="16" v-show="!verShow"><el-button disabled type="info"><span>{{timer}}</span>秒后重新获取</el-button></el-col>

data () {
    verShow: true, // 判断显示那个按钮
    timer: 60, // 短信验证码倒计时
}

this.innerVisibleForm2.PhoneNum2是input内容

methods: {
    GetCode () {
      const regEmali = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regEmali.test(this.innerVisibleForm2.PhoneNum2)) {
        this.verShow = false
        const authTimer = setInterval(() => {
          this.timer--
          if (this.timer <= 0) {
            this.verShow = true
            this.timer = 60
            clearInterval(authTimer)
          }
        }, 1000)
      } else {
        this.$message.error('请输入合法手机')
      }
    },
}