微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了小程序手機(jī)號(hào)驗(yàn)證碼登錄,具體如下:
wxml:
<view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手機(jī)號(hào)</label> <input class="int" name="phone" type="number" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" placeholder-class="pla2" value='{{phone}}' bindinput='getPhoneValue' /> </view> <view class="field"> <label for="phone">手機(jī)驗(yàn)證碼</label> <view class='changeInfoName'> <input type="number" placeholder='請(qǐng)輸入驗(yàn)證碼' bindinput='getCodeValue' placeholder-class="pla2" value='{[code]}' style='width:70%;' /> <button class='codeBtn' style="background-color:{{pageBackgroundColor}}" bindtap='getVerificationCode' disabled='{{disabled}}'>{{codename}}</button> </view> </view> <view class="form_btn2"> <button class="btn_login" type="primary" formType="submit">下一步</button> </view> </form> </view>
js:
// pages/login/login.js import http from '../../http/api'; import env from '../../http/evn.js'; Page({ data: { phone: '', code: '', codename: '獲取驗(yàn)證碼', }, getPhoneValue: function (e) { this.setData({ phone: e.detail.value }) }, getCodeValue: function (e) { this.setData({ code: e.detail.value }) }, //獲取驗(yàn)證碼 getVerificationCode() { this.getCode(); var _this = this // _this.setData({ // disabled: true // }) }, getCode: function () { console.log(this.data.phone, '手機(jī)號(hào)') var _this = this; var myreg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/; if (this.data.phone == "") { wx.showToast({ title: '手機(jī)號(hào)不能為空', icon: 'none', duration: 1000 }) return false; } else if (!myreg.test(this.data.phone)) { wx.showToast({ title: '請(qǐng)輸入正確的手機(jī)號(hào)', icon: 'none', duration: 1000 }) return false; } else { _this.setData({ disabled: true }) http.sendsms({ data: { phone: this.data.phone }, success(res) { var bgColor = this.data.pageBackgroundColor == '#9db8db'; _this.setData({ pageBackgroundColor: bgColor // iscode: res.data.data }) var num = 60; var timer = setInterval(function () { num--; if (num <= 0) { clearInterval(timer); _this.setData({ codename: '重新發(fā)送', disabled: false }) } else { _this.setData({ codename: num + "s" }) } }, 1000) } }) } }, })
到此這篇關(guān)于微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序手機(jī)號(hào)驗(yàn)證碼登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
- .NET6使用微信小程序授權(quán)登錄獲取手機(jī)號(hào)
- 微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
- uniapp微信小程序授權(quán)登錄并獲取手機(jī)號(hào)的方法
- 微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
- 微信小程序獲取手機(jī)號(hào)授權(quán)用戶登錄功能
- 微信小程序手機(jī)號(hào)授權(quán)一鍵登錄功能實(shí)現(xiàn)代碼
相關(guān)文章
微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案,需要的朋友可以參考下2018-09-09解決JS無(wú)法調(diào)用Controller問(wèn)題的方法
這篇文章主要介紹了解決JS無(wú)法調(diào)用Controller問(wèn)題的方法,需要的朋友可以參考下2015-12-12js實(shí)現(xiàn)的仿新浪微博完美的時(shí)間組件升級(jí)版
本博客沒(méi)有華麗的布局,只求樸實(shí)的js的代碼,只為js代碼愛(ài)好者提供,一周大概會(huì)出1-2篇js前沿代碼的文章.只是代碼,不說(shuō)技術(shù)2011-12-12小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè),可點(diǎn)擊切換,滑動(dòng)切換頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條
本篇文章主要分享了js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)導(dǎo)航條的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02通過(guò)封裝scroll.js 獲取滾動(dòng)條的值
本文通過(guò)實(shí)例代碼給大家介紹了通過(guò)封裝scroll.js 獲取滾動(dòng)條的值的相關(guān)知識(shí),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02