微信小程序?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();
? ? }
? },以上就是本文的全部?jī)?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ù)重載嗎?可以說(shuō)不支持,也可以說(shuō)支持。說(shuō)不支持,是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語(yǔ)言一樣,直接寫(xiě)多個(gè)同名函數(shù),讓編譯器來(lái)判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。2009-08-08
llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例
這篇文章主要為大家介紹了llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國(guó)地圖
這篇文章主要介紹了javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國(guó)地圖的相關(guān)資料,需要的朋友可以參考下2016-03-03
JS動(dòng)態(tài)添加option和刪除option(附實(shí)例代碼)
option的添加和刪除通過(guò)js實(shí)現(xiàn)及動(dòng)態(tài)創(chuàng)建select,本例提供實(shí)例的完整代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04
再談Javascript中的基本類(lèi)型和引用類(lèi)型(推薦)
這篇文章主要介紹了Javascript中的基本類(lèi)型和引用類(lèi)型的相關(guān)資料,包括基本類(lèi)型和引用類(lèi)型的概念及區(qū)別,數(shù)據(jù)類(lèi)型檢測(cè)給大家詳細(xì)介紹了js基本類(lèi)型和引用類(lèi)型,非常不錯(cuò),需要的朋友可以參考下2016-07-07

