微信小程序獲取手機(jī)驗(yàn)證碼的方法
本文實(shí)例為大家分享了微信小程序獲取手機(jī)驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
完成手機(jī)驗(yàn)證碼的功能:
(1)效果圖如下:

(開(kāi)始發(fā)送驗(yàn)證碼)

(重新發(fā)送驗(yàn)證碼)
(2)需求及思路說(shuō)明:
- 輸入正確的11位手機(jī)號(hào),使用正則校驗(yàn)。
- 校驗(yàn)手機(jī)號(hào)的歸屬地----北京移動(dòng)(這個(gè)根據(jù)需求而定)
- 點(diǎn)擊 “獲取驗(yàn)證碼” ,獲取成功與失敗,都會(huì)以彈框的形式展現(xiàn),完成倒計(jì)時(shí)。
- 倒計(jì)時(shí)為 ‘0’ 的時(shí)候,按鈕文字變成 “重新發(fā)送”
- 當(dāng)按鈕是 “獲取驗(yàn)證碼” 和 “重新發(fā)送” 的時(shí)候,按鈕是可以點(diǎn)擊進(jìn)行倒計(jì)時(shí)的
- 在倒計(jì)時(shí)過(guò)程中,按鈕是不可點(diǎn)擊的(也就是防止在倒計(jì)時(shí)的過(guò)程中重復(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='請(qǐng)獲取手機(jī)號(hào)'/>
? ? ? ? <button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機(jī)號(hào)</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ī)號(hào)碼</view>
? ? ? </view>
? ? </form>
? </view>
</block>.js文件
data:{
? ? login_VerifyCode: '獲取驗(yàn)證碼',
? ? telNumber: '', ? ? ? ? ? ?// 用戶(hù)手機(jī)號(hào)
? ? phone_code: '', ? ? ? ? ?// 手機(jī)驗(yàn)證碼
? ? error_tip: false, ? ? ? ?// 獲取手機(jī)號(hào)、驗(yàn)證碼的錯(cuò)誤提示
? ? error_tip_txt: '', ? ? ? // 錯(cuò)誤信息提示內(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: '請(qǐng)輸入手機(jī)號(hào)碼'
? ? ? ? })
? ? ? } else if (telNumber.length != 11) {
? ? ? ? this.setData({
? ? ? ? ? error_tip: true,
? ? ? ? ? error_tip_txt: '請(qǐng)輸入正確的手機(jī)號(hào)碼'
? ? ? ? })
? ? ? } else {
? ? ? ? //驗(yàn)證是否是北京移動(dòng)的手機(jī)號(hào)碼
? ? ? ? var url = '/v1/broadband/isBJMobiel.do';
? ? ? ? var params = {
? ? ? ? ? session: wx.getStorageSync('session'),
? ? ? ? ? phone: telNumber
? ? ? ? }
? ? ? ? httpUtil.postData(url, params, '', (res) => {
? ? ? ? ? console.log('判斷手機(jī)號(hào)碼的', res);
? ? ? ? ? if (res.module == "N") {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? error_tip: true,
? ? ? ? ? ? ? error_tip_txt: '此手機(jī)號(hào)非北京移動(dòng)用戶(hù)',
? ? ? ? ? ? ? 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ā)送成功,請(qǐng)注意查收',
? ? ? ? ? ? ? ? ? icon: 'success',
? ? ? ? ? ? ? ? ? duration: 2000
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? var total_micro_second = 60;
? ? ? ? ? ? ? ? // 驗(yàn)證碼倒計(jì)時(shí)
? ? ? ? ? ? ? ? this.count_down(total_micro_second);
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? ? login_tip: "驗(yàn)證碼發(fā)送失敗,請(qǐng)稍候重試"
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? });
? ? ? }
? ? }
? },
// 倒計(jì)時(shí) 驗(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ì)時(shí)時(shí)鐘
? ? ? 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ī)號(hào)
? input_phone: function(e) {
? ? console.log('手機(jī)號(hào)碼', 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
? ? ? })
? ? }
? },
?
?
// 判斷全國(guó)號(hào)段
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; //移動(dòng)
? 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ù)思路說(shuō)明,把條理梳理清晰,也就能順利完成。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄
- 微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
- 微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)
- 微信小程序綁定手機(jī)號(hào)獲取驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號(hào)/姓名功能示例
- 微信小程序如何獲取手機(jī)驗(yàn)證碼
- 微信小程序手機(jī)號(hào)碼驗(yàn)證功能的實(shí)例代碼
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號(hào)驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證
相關(guān)文章
JS加密插件CryptoJS實(shí)現(xiàn)的DES加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的DES加密,結(jié)合實(shí)例形式分析了javascript使用CryptoJS插件進(jìn)行des加密的各種常見(jiàn)模式使用技巧,需要的朋友可以參考下2018-08-08
js實(shí)現(xiàn)從右向左緩緩浮出網(wǎng)頁(yè)浮動(dòng)層廣告的方法
這篇文章主要介紹了js實(shí)現(xiàn)從右向左緩緩浮出網(wǎng)頁(yè)浮動(dòng)層廣告的方法,可實(shí)現(xiàn)右側(cè)浮動(dòng)廣告的定時(shí)彈出及點(diǎn)擊展開(kāi)、折疊等功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
講這個(gè)方法之前,我們應(yīng)該先了解下插入節(jié)點(diǎn)時(shí)瀏覽器會(huì)做什么。2010-07-07
JS實(shí)現(xiàn)滾動(dòng)條觸底加載更多
這篇文章主要介紹了JS滾動(dòng)條觸底加載更多,需要的朋友可以參考下2019-09-09
JS循環(huán)遍歷JSON數(shù)據(jù)的方法
這篇文章主要介紹了JS 循環(huán)遍歷JSON數(shù)據(jù)的方法,需要的朋友可以參考下2014-07-07
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念,它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn),有興趣的可以了解一下。2017-04-04
老生常談javascript中邏輯運(yùn)算符&&和||的返回值問(wèn)題
下面小編就為大家?guī)?lái)一篇老生常談javascript中邏輯運(yùn)算符&&和||的返回值問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
JS表示Stack類(lèi)練習(xí)用棧實(shí)現(xiàn)任意進(jìn)制轉(zhuǎn)換
這篇文章主要為大家介紹了JS表示Stack類(lèi)練習(xí)用棧實(shí)現(xiàn)任意進(jìn)制轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04

