时间:2022-09-07 09:48:15 | 栏目:JavaScript代码 | 点击:次
本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下
完成手机验证码的功能:
(1)效果图如下:
(开始发送验证码)
(重新发送验证码)
(2)需求及思路说明:
.wxml 文件
<block wx:if='{{show_detail_title}}'> <view class='show_detail_centent ver_phone_con'> <form> <view class='show_detail_centent_title ver_title' >验证</view> <view class='error_tip}}' style="{{error_tip == true?'visibility:visible':'visibility: hidden'}}">{{error_tip_txt}}</view> <view class='phone_verification'> <view class='ver_item'> <input type='text' class='phone_number' value="{{telNumber}}" bindinput="input_phone" placeholder-style='color:#cdcdcd' placeholder='请获取手机号'/> <button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> </view> <view class='last_phone_number ver_item'> <input type='number' class='phone_number' bindinput="input_code" value='{{phone_code}}' placeholder-style='color:#cdcdcd' placeholder='验证码'/> <button type="primary" formType="submit" class='get_phone_number' bindtap="getPhoneCode" disabled='{{code_show}}'>{{login_VerifyCode}}</button> </view> <button type="primary" formType="submit" class='finish_btn' disabled = '{{finish_show}}' bindtap="submit_finish" >完成</button> <view class='phone_tip'>注:办理******需验证手机号码</view> </view> </form> </view> </block>
.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; } }
以上根据思路说明,把条理梳理清晰,也就能顺利完成。