前端发送验证码后进行的操作

最新推荐文章于 2024-10-13 18:47:07 发布

好想Z☡zᶻ

最新推荐文章于 2024-10-13 18:47:07 发布

阅读量104

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_45750213/article/details/142084355

版权

设置定时器并在约定的时间后清除定时器可进行重新发送。

html:

<a-button v-if="isMobileCodeTwo" type="primary" @click="onClickBut">发送</a-button>
<a-button v-else  disabled type="primary">{{ timeTwo }}S</a-button>

js:

    //  点击发送
    onClickBut() {
      if (this.formData.rnd == '') {
        this.$message.error('请输入图片验证码')
        return false
      }
      let mobileReg = /^1\d{10}$/
      if (!mobileReg.test(this.formData.mobile)) {
        this.$message.error('请正确填写手机号码')
        return false
      }
      let url = process.env.NODE_ENV === 'production' ? SendCode : testSendCode
      url(this.formData).then((res) => {
        if (+res.status === 1) {
          this.timerFn()
        } else {
          this.$message.error(res.message)
        }
      })
    },
   //  短信倒计时
    timerFn() {
      let secondTwo = setInterval(() => {
        if (this.timeTwo > 0) {
          this.timeTwo--
          this.isMobileCodeTwo = false
        } else {
          this.isMobileCodeTwo = true
          this.timeTwo = 120
          clearInterval(secondTwo)
        }
      }, 1000)
    },