微信小程序-短信验证码
效果：
源码地址：链接：https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码：ot16
参考：https://blog.****.net/Beijiyang999/article/details/77885021
布局
<view class="section">
<text>手机号码</text>
<input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus='true' />
<text wx:if='{{send}}' class='sendMsg' bindtap='sendMsg'>发送</text>
<text wx:if="{{alreadySend}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text>
</view>
<view class="section">
<text>短信验证</text>
<input placeholder="短信验证码" type="number" maxlength="6" bindinput="addCode" />
</view>
<button type="{{buttonType}}" disabled="{{disabled}}" bindtap="onSubmit">保存</button>
js方法函数
// pages/info-two/info-two.js
Page({
/**
* 页面的初始数据
*/
data: {
send: false,
alreadySend: false,
second: 60,
disabled: true,
buttonType: 'default',
phoneNum: '',
code: '',
},
// 手机号部分
inputPhoneNum: function (e) {
let phoneNum = e.detail.value
if (phoneNum.length === 11) {
let checkedNum = this.checkPhoneNum(phoneNum)
if (checkedNum) {
this.setData({
phoneNum: phoneNum
})
console.log('phoneNum=' + this.data.phoneNum)
this.showSendMsg()
this.activeButton()
}
} else {
this.setData({
phoneNum: ''
})
this.hideSendMsg()
}
},
checkPhoneNum: function (phoneNum) {
let str = /^1\d{10}$/
if (str.test(phoneNum)) {
return true
} else {
wx.showToast({
title: '手机号不正确',
icon: 'none'
})
return false
}
},
showSendMsg: function () {
if (!this.data.alreadySend) {
this.setData({
send: true
})
}
},
hideSendMsg: function () {
this.setData({
send: false,
disabled: true,
buttonType: 'default'
})
},
sendMsg: function () {
console.log('发送获取验证码')
this.setData({
alreadySend: true,
send: false
})
// this.timer()
this.countdown()
},
timer: function () {
//Promise:ES6将其写进了语言标准 获取异步操作的消息
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
this.setData({
second: this.data.second - 1
})
if (this.data.second <= 0) {
this.setData({
second: 60,
alreadySend: false,
send: true
})
// resolve异步操作成功
resolve(setTimer)
}
}
, 1000)
})
// 将Promise对象的状态从“未完成”变为“成功”
promise.then((setTimer) => {
console.log('resolve异步操作成功')
clearInterval(setTimer)
})
},
countdown:function() {
var that=this
var second=this.data.second
if(second==0) {
that.setData({
second: 60
})
return
}
var time=setTimeout(function(){
that.setData({
second: second-1
})
that.countdown(that)
},1000)
},
// 验证码
addCode: function (e) {
console.log('验证码-addCode')
this.setData({
code: e.detail.value
})
this.activeButton()
},
// 按钮
activeButton: function () {
//let{} es6的解构赋值。大括号中的key对应item的key 其值也是相对应的
let { phoneNum, code } = this.data
console.log(this.data)
if (phoneNum) {
this.setData({
disabled: false,
buttonType: 'primary'
})
} else {
this.setData({
disabled: true,
buttonType: 'default'
})
}
},
// 提交
onSubmit: function () {
console.log('onSubmit')
//模拟校验验证码
if(this.data.code=='123456'){
wx.showToast({
title: '验证成功',
icon:'success'
})
}else {
wx.showToast({
title: '验证失败',
icon: 'none'
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
...