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













