微信小程序获取手机验证码的方法微信小程序获取手机验证码的

本文实例为大家分享了微信小程序获取手机验证码的具体代码，供大家参考，具体内容如下
完成手机验证码的功能：
（1）效果图如下：

文章图片

（开始发送验证码）

文章图片

（重新发送验证码）
（2）需求及思路说明：

输入正确的11位手机号，使用正则校验。
校验手机号的归属地----北京移动（这个根据需求而定）
点击 “获取验证码” ，获取成功与失败，都会以弹框的形式展现，完成倒计时。
倒计时为 ‘0’ 的时候，按钮文字变成 “重新发送”
当按钮是 “获取验证码” 和 “重新发送” 的时候，按钮是可以点击进行倒计时的
在倒计时过程中，按钮是不可点击的（也就是防止在倒计时的过程中重复点击）

.wxml 文件

验证{{error_tip_txt}}注：办理******需验证手机号码

.js文件

data:{login_VerifyCode: '获取验证码',telNumber: '',// 用户手机号phone_code: '',// 手机验证码error_tip: false,// 获取手机号、验证码的错误提示error_tip_txt: '',// 错误信息提示内容code_show: false,// 重复点击获取验证码},// 获取手机验证码getPhoneCode: function() {if (this.data.login_VerifyCode == '获取验证码' || this.data.login_VerifyCode == '重新发送'){let telNumber = this.data.telNumber; console.log('获取验证码', telNumber.length); console.log(util.regNumber(telNumber)); if (telNumber == '') {this.setData({error_tip: true,error_tip_txt: '请输入手机号码'})} else if (telNumber.length != 11) {this.setData({error_tip: true,error_tip_txt: '请输入正确的手机号码'})} else {//验证是否是北京移动的手机号码var url = '/v1/broadband/isBJMobiel.do'; var params = {session: wx.getStorageSync('session'),phone: telNumber}httpUtil.postData(url, params, '', (res) => {console.log('判断手机号码的', res); if (res.module == "N") {this.setData({error_tip: true,error_tip_txt: '此手机号非北京移动用户',code_show: true})} else {var url = '/v1/bdbrokerRenewal/authSendMsg.do'; var params = {session: wx.getStorageSync('session'),phone: telNumber}; httpUtil.postData(url, params, '', (res) => {console.log(res); if (res.success) {wx.showToast({title: '短信验证码发送成功，请注意查收',icon: 'success',duration: 2000})var total_micro_second = 60; // 验证码倒计时this.count_down(total_micro_second); } else {that.setData({login_tip: "验证码发送失败，请稍候重试"}); }}); }}); }}},// 倒计时验证码count_down: function(total_micro_second) { //发送验证码按钮var that = this; if (total_micro_second <= 0) {that.setData({login_VerifyCode: "重新发送"}); // timeout则跳出递归return false; } else {// 渲染倒计时时钟that.setData({login_VerifyCode: total_micro_second + "s"}); total_micro_second--; if (that.data.login_timer == true) {setTimeout(function() {that.count_down(total_micro_second); }, 1000)} else {that.setData({login_VerifyCode: "获取验证码"}); }}},// 输入框失去焦点手机号input_phone: function(e) {console.log('手机号码', e); this.setData({telNumber: e.detail.value,error_tip_txt: ''})this.color_finish(); },// 输入框输入验证码input_code: function(e) {console.log('验证码值', e); this.setData({phone_code: e.detail.value})this.color_finish(); },// 完成提交按钮颜色变化color_finish: function() {if (telNumber_status(this.data.telNumber) && code_status(this.data.phone_code)) {this.setData({finish_show: false})} else {this.setData({finish_show: true})}}, // 判断全国号段const regNumber = mobile => {var move = /^((134)|(135)|(136)|(137)|(138)|(139)|(147)|(150)|(151)|(152)|(157)|(158)|(159)|(178)|(182)|(183)|(184)|(187)|(188)|(198))\d{8}$/g; //移动var link = /^((130)|(131)|(132)|(155)|(156)|(145)|(185)|(186)|(176)|(175)|(170)|(171)|(166))\d{8}$/g; //联通var telecom = /^((133)|(153)|(173)|(177)|(180)|(181)|(189)|(199))\d{8}$/g; //电信if (move.test(mobile)) {return true; } else if (link.test(mobile)) {return true; } else if (telecom.test(mobile)) {return true; } else {return false; }}

以上根据思路说明，把条理梳理清晰，也就能顺利完成。
【微信小程序获取手机验证码的方法】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。