微信小程序手機號驗證碼登錄的項目實現(xiàn)
更新時間:2022年04月02日 11:10:07 作者:七彩貓貓蟲
本文主要介紹了微信小程序手機號驗證碼登錄的項目實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文主要介紹了小程序手機號驗證碼登錄,具體如下:


wxml:
<view class="content_bottom">
<form bindsubmit="formSubmit">
<view class="field">
<label for="phone">手機號</label>
<input class="int" name="phone" type="number" placeholder="請輸入手機號碼" placeholder-class="pla2" value='{{phone}}' bindinput='getPhoneValue' />
</view>
<view class="field">
<label for="phone">手機驗證碼</label>
<view class='changeInfoName'>
<input type="number" placeholder='請輸入驗證碼' 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: '獲取驗證碼',
},
getPhoneValue: function (e) {
this.setData({
phone: e.detail.value
})
},
getCodeValue: function (e) {
this.setData({
code: e.detail.value
})
},
//獲取驗證碼
getVerificationCode() {
this.getCode();
var _this = this
// _this.setData({
// disabled: true
// })
},
getCode: function () {
console.log(this.data.phone, '手機號')
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: '手機號不能為空',
icon: 'none',
duration: 1000
})
return false;
} else if (!myreg.test(this.data.phone)) {
wx.showToast({
title: '請輸入正確的手機號',
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)于微信小程序手機號驗證碼登錄的項目實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序手機號驗證碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序onLaunch異步,首頁onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問題的兩種解決方案,需要的朋友可以參考下2018-09-09

