微信小程序之定时器实现发送验证码

最新推荐文章于 2024-06-27 12:34:38 发布

原创最新推荐文章于 2024-06-27 12:34:38 发布 · 764 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了在WeApp中实现手机号验证与发送验证码功能的方法，包括页面代码布局、定时器控制验证码倒计时及发送逻辑，使用VantWeapp组件库提升开发效率。

1.页面代码：

    <van-cell-group>

      <van-field class="phone_div" type="number" value="" name="phone" label="账号" placeholder="请输入你的账号" bindchange="onPhoneChange" />
      <van-button class='="send_code_div"' type="info" disabled="{{disabled}}" bind:click="onSendCode">
        <text class='code_text'>{{codeText}}{{counttime}}{{codeTextLast}}</text>
      </van-button>

      <van-field type="number" value="" name="code" label="验证码" placeholder="请输入验证码" error-message="" border="{{ newPassword }}" bindchange="onCodeChange" />
    </van-cell-group>

2.js代码：

/*定时器*/
function countDown(that, count) {
  if (count == 0) {
    that.setData({
       counttime: '',
       codeText: '获取验证码',
       codeTextLast: '',
       disabled: false
    })
    return;
   }
   that.setData({
    counttime: count
   })
   setTimeout(function () {
    count--;
    countDown(that, count);
   }, 1000);
  0
}

/*验证码按钮事件**/

onSendCode: function() {
    var phone = this.data.phone;
    var that = this;
    if (phone.length <= 0) {
      Dialog.alert({
        message: '请输入电话号码'
      });
      return;
    }
//调用后端发送验证码短信接口
    http.get("/sendPoneCode", {
      mobile: phone
    }, function(err, res) {
      if (res.errCode == -999) {
        Dialog.alert({
          message: '获取验证码失败'
        });
        return;
      }
      if (res.errCode == 0) {
        const toast = Toast.success('获取成功');
        that.setData({
          disabled: true,
          codeText:'',
          codeTextLast:'秒重新获取'
        })
        countDown(that, 60);
      }
    })

  }

/*data参数*/

data: {
    phone: '',
    code: '',
    counttime: '',
    codeText:'获取验证码',
    codeTextLast:'',
    disabled: false
  }

效果展示：