微信小程序獲取手機驗證碼的方法
本文實例為大傢分享瞭微信小程序獲取手機驗證碼的具體代碼,供大傢參考,具體內容如下
完成手機驗證碼的功能:
(1)效果圖如下:
(開始發送驗證碼)
(重新發送驗證碼)
(2)需求及思路說明:
- 輸入正確的11位手機號,使用正則校驗。
- 校驗手機號的歸屬地—-北京移動(這個根據需求而定)
- 點擊 “獲取驗證碼” ,獲取成功與失敗,都會以彈框的形式展現,完成倒計時。
- 倒計時為 ‘0’ 的時候,按鈕文字變成 “重新發送”
- 當按鈕是 “獲取驗證碼” 和 “重新發送” 的時候,按鈕是可以點擊進行倒計時的
- 在倒計時過程中,按鈕是不可點擊的(也就是防止在倒計時的過程中重復點擊)
.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; } }
以上根據思路說明,把條理梳理清晰,也就能順利完成。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。