微信小程序獲取手機(jī)驗(yàn)證碼的方法
本文實(shí)例為大家分享了微信小程序獲取手機(jī)驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
完成手機(jī)驗(yàn)證碼的功能:
(1)效果圖如下:
(開始發(fā)送驗(yàn)證碼)
(重新發(fā)送驗(yàn)證碼)
(2)需求及思路說明:
- 輸入正確的11位手機(jī)號,使用正則校驗(yàn)。
- 校驗(yàn)手機(jī)號的歸屬地----北京移動(這個根據(jù)需求而定)
- 點(diǎn)擊 “獲取驗(yàn)證碼” ,獲取成功與失敗,都會以彈框的形式展現(xiàn),完成倒計(jì)時。
- 倒計(jì)時為 ‘0’ 的時候,按鈕文字變成 “重新發(fā)送”
- 當(dāng)按鈕是 “獲取驗(yàn)證碼” 和 “重新發(fā)送” 的時候,按鈕是可以點(diǎn)擊進(jìn)行倒計(jì)時的
- 在倒計(jì)時過程中,按鈕是不可點(diǎn)擊的(也就是防止在倒計(jì)時的過程中重復(fù)點(diǎn)擊)
.wxml 文件
<block wx:if='{{show_detail_title}}'> ? <view class='show_detail_centent ver_phone_con'> ? ? <form> ? ? ? <view class='show_detail_centent_title ver_title' >驗(yàn)證</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='請獲取手機(jī)號'/> ? ? ? ? <button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機(jī)號</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='驗(yàn)證碼'/> ? ? ? ? <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'>注:辦理******需驗(yàn)證手機(jī)號碼</view> ? ? ? </view> ? ? </form> ? </view> </block>
.js文件
data:{ ? ? login_VerifyCode: '獲取驗(yàn)證碼', ? ? telNumber: '', ? ? ? ? ? ?// 用戶手機(jī)號 ? ? phone_code: '', ? ? ? ? ?// 手機(jī)驗(yàn)證碼 ? ? error_tip: false, ? ? ? ?// 獲取手機(jī)號、驗(yàn)證碼的錯誤提示 ? ? error_tip_txt: '', ? ? ? // 錯誤信息提示內(nèi)容 ? ? ?code_show: false, ? ? ? // 重復(fù)點(diǎn)擊 獲取驗(yàn)證碼 }, // 獲取手機(jī)驗(yàn)證碼 ? getPhoneCode: function() { ? ? if (this.data.login_VerifyCode == '獲取驗(yàn)證碼' || this.data.login_VerifyCode == '重新發(fā)送'){ ? ? ? let telNumber = this.data.telNumber; ? ? ? console.log('獲取驗(yàn)證碼', telNumber.length); ? ? ? console.log(util.regNumber(telNumber)); ? ? ? if (telNumber == '') { ? ? ? ? this.setData({ ? ? ? ? ? error_tip: true, ? ? ? ? ? error_tip_txt: '請輸入手機(jī)號碼' ? ? ? ? }) ? ? ? } else if (telNumber.length != 11) { ? ? ? ? this.setData({ ? ? ? ? ? error_tip: true, ? ? ? ? ? error_tip_txt: '請輸入正確的手機(jī)號碼' ? ? ? ? }) ? ? ? } else { ? ? ? ? //驗(yàn)證是否是北京移動的手機(jī)號碼 ? ? ? ? var url = '/v1/broadband/isBJMobiel.do'; ? ? ? ? var params = { ? ? ? ? ? session: wx.getStorageSync('session'), ? ? ? ? ? phone: telNumber ? ? ? ? } ? ? ? ? httpUtil.postData(url, params, '', (res) => { ? ? ? ? ? console.log('判斷手機(jī)號碼的', res); ? ? ? ? ? if (res.module == "N") { ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? error_tip: true, ? ? ? ? ? ? ? error_tip_txt: '此手機(jī)號非北京移動用戶', ? ? ? ? ? ? ? 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: '短信驗(yàn)證碼發(fā)送成功,請注意查收', ? ? ? ? ? ? ? ? ? icon: 'success', ? ? ? ? ? ? ? ? ? duration: 2000 ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? var total_micro_second = 60; ? ? ? ? ? ? ? ? // 驗(yàn)證碼倒計(jì)時 ? ? ? ? ? ? ? ? this.count_down(total_micro_second); ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? that.setData({ ? ? ? ? ? ? ? ? ? login_tip: "驗(yàn)證碼發(fā)送失敗,請稍候重試" ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? ? } ? ? ? ? }); ? ? ? } ? ? } ? }, // 倒計(jì)時 驗(yàn)證碼 ? count_down: function(total_micro_second) { //發(fā)送驗(yàn)證碼按鈕 ? ? var that = this; ? ? if (total_micro_second <= 0) { ? ? ? that.setData({ ? ? ? ? login_VerifyCode: "重新發(fā)送" ? ? ? }); ? ? ? // timeout則跳出遞歸 ? ? ? return false; ? ? } else { ? ? ? // 渲染倒計(jì)時時鐘 ? ? ? 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: "獲取驗(yàn)證碼" ? ? ? ? }); ? ? ? } ? ? } ? }, ? // 輸入框失去焦點(diǎn) ? 手機(jī)號 ? input_phone: function(e) { ? ? console.log('手機(jī)號碼', e); ? ? this.setData({ ? ? ? telNumber: e.detail.value, ? ? ? error_tip_txt: '' ? ? }) ? ? this.color_finish(); ? }, ? // 輸入框輸入 ? 驗(yàn)證碼 ? input_code: function(e) { ? ? console.log('驗(yàn)證碼值', 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; //聯(lián)通 ? 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; ? } }
以上根據(jù)思路說明,把條理梳理清晰,也就能順利完成。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄
- 微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時60s
- 微信小程序手機(jī)號驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)
- 微信小程序綁定手機(jī)號獲取驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號/姓名功能示例
- 微信小程序如何獲取手機(jī)驗(yàn)證碼
- 微信小程序手機(jī)號碼驗(yàn)證功能的實(shí)例代碼
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序?qū)崿F(xiàn)手機(jī)號碼驗(yàn)證
相關(guān)文章
javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04Object.defineProperty()函數(shù)之屬性描述對象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對象,JavaScript?提供了一個內(nèi)部數(shù)據(jù)結(jié)構(gòu),用來描述對象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對象2022-09-09JavaScript實(shí)現(xiàn)圖片偽異步上傳過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片偽異步上傳過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04- 水平不高,不能也不想從太深的層次去講解這個東西,只是根據(jù)一段比較有代表性的代碼,結(jié)合執(zhí)行結(jié)果,從表象上粗淺地談?wù)劇?/div> 2010-12-12
IE與FF下javascript獲取網(wǎng)頁及窗口大小的區(qū)別詳解
本篇文章主要是對IE與FF下javascript獲取網(wǎng)頁及窗口大小的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01最新評論