JavaScript实现发送短信验证码倒计时效果

背景

在特定的移动端H5场景中，我们会遇到用户注册或者登陆需要通过获取短信验证码来进行验证，本文贴出代码，以供参考。

思路

1.点击获取验证码按钮，需要验证手机号码是否为空
2.验证手机号码是否合法
3.如果上述两个条件满足则禁用按钮，并动态更改按钮文字内容
4.发送短信接口请求

代码视图

这里我直接贴出基于vue写的短信验证码倒计时效果，就不单独提出来了哈。

<template>
  <div class="page-container">
    <div class="form">
      <div class="form-control">
        <div>手机号</div>
        <input type="tel" v-model.trim="dataForm.phone" autofocus="autofocus" placeholder="请输入您的手机号码">
        <button class="verify-button"></button>
      </div>
      <div class="form-control">
        <div>验证码</div>
        <input type="tel" v-model.trim="dataForm.verifyCode" autofocus="autofocus" placeholder="请输入验证码">
        <button class="verify-button" :disabled="verifyContent.disabled" @click="obtainVerifyCode">{{verifyContent.text}}</button>
      </div>
      <div class="clause-bar">
        注册即代表同意
        <div @click="$router.push({name: 'Clause'})">平台分销员条款</div>
      </div>
      <button class="form-submit form-submit-disabled" :disabled="!dataForm.phone" v-show="!dataForm.phone">注冊</button>
      <button class="form-submit" v-show="dataForm.phone" @click="dataFormSubmit">登錄</button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    // 发送验证码
    obtainVerifyCode () {
      var self = this
      if(self.validePhone()) {
        // 发送短信接口请求
        self.$http.post('/verify',self.dataForm).then(resp => {
          console.log('resp',resp)
        })
        self.countDown()
      }
    },
    // 倒计时方法
    countDown () {
      var time = 60
      var timer = setInterval(() => {
          if(time == 0) {
            clearInterval(timer)
            this.verifyContent.disabled = false
            this.verifyContent.text = '获取验证码'
          } else {
            this.verifyContent.disabled = true
            this.verifyContent.text = `重新获取(${time}s)`
            time--
            console.log('time',time)
          }
        }, 1000);
    },
    // 验证手机号
    validePhone () {
      if(['',null,undefined].includes(this.dataForm.phone)) {
        Toast('请输入手机号码')
        return false
      } else if (!/^1[3456789]\d{9}$/.test(this.dataForm.phone)) {
        Toast('请输入正确的手机号码')
        console.log('bbb')
        return false
      } else {
        console.log('校验成功')
        return true
      }
    },
    // 注册方法
    dataFormSubmit () {
      var self = this
      if(self.validePhone()) {
        if(!['',null,undefined].includes(self.dataForm.verifyCode)) {
          // 發送請求
          console.log('可以发送接口')
        } else {
          Toast('请输入验证码')
        }
      }
    },
  },

  data () {
    return {
      token:'',
      // 表单初始化数据
      dataForm: {
        channeId: '',
        type: 'USERNAME',
        phone: '',
        verifyCode: ''
      },
      // 获取验证码按钮
      verifyContent: {
        disabled: false,
        text: '获取验证码',
      },
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 0 .4rem;
}

/* 注册、登录 */
.form {
  padding-top: .4rem;
}

.form-control {
  display: flex;
  height: .8rem;
  color: #262626;
  line-height: .8rem;
  align-items: center;
}

.form-control div {
  width: 1.38rem;
  text-align: left;
}

.form-control input {
  flex: 1;
  height: .6rem;
  border: 0;
  color: #262626;
}

button[disabled] {
  color: rgba(38, 38, 38, 0.3) ;
  background-color: #fff;
}

.verify-button {
  width: 2.4rem;
  border: 0;
  color: #FD7A00;
  text-align: right;
  background-color: #fff;
}

.clause-bar {
  display: flex;
  font-size: .24rem;
  margin: .6rem 0 .2rem 0;
}

.clause-bar div {
  color: #FD7A00;
}

.form-submit {
  display: flex;
  width: 100%;
  height: 1rem;
  color: #fff;
  align-items: center;
  border-radius: .16rem;
  justify-content: center;
  background: linear-gradient(314deg, #FD7A00 0%, #FFA71A 100%);
}

.form-submit-disabled {
  opacity: 0.6;
  color: #fff!important;
}

.dialog-step1 {
  color: #262626;
  font-size: .36rem;
  font-weight: bold;
  line-height: .6rem;
  margin-top: .4rem;
}
.dialog-step2 {
  font-weight: 400;
  font-size: .28rem;
  line-height: .5rem;
  color: rgba(38, 38, 38, 0.8);
}

.dialog-step3 {
  color: #262626;
  font-size: .32rem;
  font-weight: 400;
  line-height: .5rem;
}
.dialog-step4 {
  font-weight: 400;
  font-size: .28rem;
  line-height: .4rem;
  color: rgba(38, 38, 38, 0.4);
  margin-bottom: .2rem;
}

.dialog-qrcode {
  /* max-width: 100%; */
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  margin: .4rem auto
}
</style>