微信小程序:获取验证码

版权声明：本文为原创文章，可转载分享学习，但禁止商用 https://blog.csdn.net/Cituses/article/details/80307449

本篇主要介绍微信小程序实现倒计时60s获取验证码的功能，及其需要注意的细节。具体实现可以参考我GitHub 上的 demo，有需要的可以下载 ,替换自己的APPID即可运行。更多知识点也可以参考我的简书

实现功能

1、实现了手机号码的判断（正则判断手机号码）
2、实现了计时器

实现效果

实现代码

*.js文件里面为主要逻辑代码,这里需要注意到，手机号码的验证、密码的验证、验证码的验证（前端验证或是后端验证）

var util = require('../../utils/util.js');  
var interval = null //倒计时函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    password: '', 
    authcode: '',
    time: '获取验证码', //倒计时 
    currentTime: 60,//限制60s
    isClick:false,//获取验证码按钮，默认允许点击
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

 },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {


  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 用户名和密码 
   * */
  usernameInput: function (event) {
    // console.log("username==",event.detail.value)
    this.setData({ username: event.detail.value })
  },

  passwordInput: function (event) {
    // console.log("password==", event.detail.value)
    this.setData({ password: event.detail.value })
  },

  authcodeInput: function (event) {
    // console.log("password==", event.detail.value)
    this.setData({ authcode: event.detail.value })
  },

  /**
   * 获取验证码
   */
  gainAuthCodeAction:function(){
    let that = this;
    /*第一步：验证手机号码*/
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;// 判断手机号码的正则
    if (that.data.username.length == 0) {
      util.progressTips('手机号码不能为空')
      return;
    }

    if (that.data.username.length < 11) {
      util.progressTips('手机号码长度有误！')
      return;
    }

    if (!myreg.test(that.data.username)) {
      util.progressTips('错误的手机号码！')
      return;
    }
    /*第二步：设置计时器*/
    // 先禁止获取验证码按钮的点击
    that.setData({
      isClick: true,
    })
    // 60s倒计时 setInterval功能用于循环，常常用于播放动画，或者时间显示
    var currentTime = that.data.currentTime;
    interval = setInterval(function(){
      currentTime--;//减
      that.setData({
        time: currentTime + '秒后获取'
      })
      if (currentTime <= 0) {
        clearInterval(interval)
        that.setData({
          time: '获取验证码',
          currentTime: 60,
          isClick: false
        })
      }
    },1000);
    /*第三步：请求验证码接口，并记录服务器返回的验证码用于判断，这里服务器也可能不返回验证码，那验证码的判断交给后台*/
    // wx.request({})
  },

  /**
   * 登录
   */
  loginBtnClick: function () {
    let that = this;
    // 判断账户、密码、验证码
    // wx.request({})
  }
})