微信小程序> 微信小程序:获取验证码

微信小程序:获取验证码

浏览量:565 时间: 来源:Jane Han
 

本篇主要介绍微信小程序实现倒计时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({})  }})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎