小程序手机号验证及验证码倒计时
作者:互联网
1.手机号合法验证
.wxml
<input bindinput="check" name='phone' type='number' placeholder="请输入手机号"
maxlength="11"></input>
<button disabled="{{!active}}">下一步</button>
.js
Page({
data: {
active: false
},
check(e) {
this.setData({
phone: e.detail.value,
active: /^1[345678]\d{9}$/.test(e.detail.value) ? true : false
})
},
})
2.发送验证码倒计时
.wxml
<button disabled='{{disabled}}' bindtap="verificavtion">
{{time}}</button>
.js
var countDown = null
Page({
data: {
disabled: false,
time: '获取验证码'
},
onUnload: function () {
clearInterval(countDown)
},
verification(){
// 手机获取验证码成功后
if(success){
let that = this
that.setData({
disabled: true,
})
var currentTime = 60
countDown = setInterval(function () {
currentTime--
that.setData({
time: currentTime + 's'
})
if (currentTime <= 0) {
clearInterval(countDown)
that.setData({
time: '重新发送',
disabled: false
})
}
}, 1000)
}
}
})
(1)在.js最外层声明倒计时
(2)卸载此页面后倒计时不会结束 在onUnload和其他跳转事件中停止倒计时,另外可以在全局中同时做一个倒计时并在onload中做判断 保证卸载此页面后再加载回此页面倒计时的连贯
标签:disabled,false,手机号,currentTime,验证码,倒计时,setData 来源: https://blog.csdn.net/wgz6101/article/details/120183899