微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
效果如下圖:
wxml部分如下:
<!--驗(yàn)證碼--> ? <view class="mod t-name" style='position:relative'> ? ? <text class="key">驗(yàn)證碼:</text> ? ? <input type="digit" bindinput="bindKeyInput" data-inputname="phoneCode" value='{{phoneCode}}' class="input" maxlength="100" placeholder="請(qǐng)輸入手機(jī)驗(yàn)證碼" /> ? ? <text class='logbook'></text> ? ? <text class='getkey' bindtap="clickGainCode">{{tipsCode}}</text> </view>
css部分代碼如下:
.mod{ ? display: flex; ? flex-direction: row; ? justify-content: space-between; ? align-items: center; ? height: 100rpx; ? padding: 0 20rpx; ? border-bottom:1rpx solid #ccc; ? box-sizing: border-box; } .mod .key{ ? font-size: 28rpx; ? font-weight: bold; ? text-align: right; ? width: 160rpx; } .t-name{ ? background-color: rgb(254,254,254); ? box-sizing: border-box; } .t-name .input{ ? width: 540rpx; ? font-size: 28rpx; ? margin-left: 30rpx; } .logbook { ? font-size: 24rpx; ? width: 150rpx; ? text-align: right; ? font-weight: bold; } .getkey { ? width: 200rpx; ? position: absolute; ? right: 0rpx; ? text-align: center; ? color: rgb(31, 45, 210); ? font-size: 24rpx; ? border-left: 1px solid #f0f0f0; }
js的data里定義如下內(nèi)容:
data: { ?? ??? ?tipsCode: "獲取驗(yàn)證碼", ? ? ?? ?timeNum: 60, ? ? ?? ?clikType: false, ? ? ?? ?phone: null, ? ? ?? ?phoneCode: null, ? ? ? }
獲取驗(yàn)證碼方法如下:
?bindKeyInput: function(e) { ? ? this.data[e.currentTarget.dataset.inputname] = e.detail.value; ? ? this.setData(this.data); ? }, ? //獲取驗(yàn)證碼時(shí)的顯示時(shí)間 ? getTime() { ? ? var that = this; ? ? var timer = setInterval(function() { ? ? ? that.data.timeNum--; ? ? ? if (that.data.timeNum <= 0) { ? ? ? ? that.setData({ ? ? ? ? ? tipsCode: "重新獲取驗(yàn)證碼", ? ? ? ? ? timeNum: timeOut, ? ? ? ? ? clikType: false ? ? ? ? }); ? ? ? ? clearInterval(timer); ? ? ? } else { ? ? ? ? that.setData({ ? ? ? ? ? tipsCode: "重新發(fā)送" + that.data.timeNum + "秒", ? ? ? ? }) ? ? ? } ? ? }, 1000) ? }, ? //輸入手機(jī)號(hào)獲取驗(yàn)證碼 ? gainCode() { ? ? var that = this; ? ? if (this.data.phone == '' || this.data.phone == null) { ? ? ? wx.showToast({ ? ? ? ? title: '手機(jī)號(hào)不能為空', ? ? ? ? icon: 'none', ? ? ? }) ? ? } ?else { ? ? ? that.setData({ ? ? ? ? clikType: true ? ? ? }) ? ? ? if (this.data.timeNum < timeOut) { ? ? ? } else { ? ? ? ? wx.request({ ? ? ? ? ? url: wxapp_api_url + '/common/getCode', ? ? ? ? ? header: { ? ? ? ? ? ? 'content-type': 'application/x-www-form-urlencoded' ? ? ? ? ? }, ? ? ? ? ? method: "get", ? ? ? ? ? data: { ? ? ? ? ? ? phone: this.data.phone ? ? ? ? ? }, ? ? ? ? ? success: function(res) { ? ? ? ? ? ? that.getTime(); ? ? ? ? ? } ? ? ? ? }) ? ? ? } ? ? } ? }, ? // 點(diǎn)擊獲取手機(jī)驗(yàn)證碼 ? clickGainCode(e) { ? ? if (!this.data.clikType) { ? ? ? this.gainCode(); ? ? } ? },
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號(hào)驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼
- 微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序如何獲取手機(jī)驗(yàn)證碼
- 微信小程序綁定手機(jī)號(hào)獲取驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果
- 詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
相關(guān)文章
讓JavaScript 輕松支持函數(shù)重載 (Part 1 - 設(shè)計(jì))
JavaScript支持函數(shù)重載嗎?可以說不支持,也可以說支持。說不支持,是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語言一樣,直接寫多個(gè)同名函數(shù),讓編譯器來判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。2009-08-08llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例
這篇文章主要為大家介紹了llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國地圖
這篇文章主要介紹了javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國地圖的相關(guān)資料,需要的朋友可以參考下2016-03-03JS動(dòng)態(tài)添加option和刪除option(附實(shí)例代碼)
option的添加和刪除通過js實(shí)現(xiàn)及動(dòng)態(tài)創(chuàng)建select,本例提供實(shí)例的完整代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04