微信小程序---完整的验证码获取倒计时效果 ---根据手机号是否符合要求进行判断
提示：按钮的设置不要要view标签代替 因为view没有禁用属性
图示：(为了录屏把计时器调快了 自己吧计时器设成一秒就行)
wxml代码：
<view class='shouji_info'>
<view class='info_list'>
<input placeholder='请输入手机号' bindinput="phoneInput"></input>
</view>
<view class='info_list'>
<input class='left' placeholder='验证码'></input>
<button class='right yanzheng_btn' bindtap="bindButtonTap" disabled='{{disabled}}' style="background-color:{{color}}">{{text}}</button>
</view>
</view>
wxss代码：
page{
font-size: 30rpx;
}
.left{ float: left}
.right{float: right}
.info_list {
height: 103rpx;
line-height: 103rpx;
width: 100%;
border-bottom: 1px solid #bcbcbd;
padding-left: 24rpx;
display: inline-block;
font-size: 33rpx;
}
.shouji_info input {
margin-top: 25rpx;
/* background: rebeccapurple; */
}
.yanzheng_btn {
width: 207rpx;
background: #929fff;
margin-right: 20rpx;
height: 82rpx;
margin-top: 12rpx;
text-align: center;
line-height: 82rpx;
border-radius: 15rpx;
color: #fff;
font-size: 33rpx;
padding: 0 10rpx;
}
js代码
// pages/biji/biji.js
Page({
/**
* 页面的初始数据
*/
data: {
text: '获取验证码', //按钮文字
currentTime: 61, //倒计时
disabled: false, //按钮是否禁用
phone: '' //获取到的手机栏中的值
},
//获取手机栏input中的值
phoneInput: function (e) {
this.setData({
phone: e.detail.value
})
},
//获取验证码按钮
bindButtonTap: function () {
var that = this;
that.setData({
disabled: true, //只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）
color: '#ccc',
})
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
if (phone == '') {
warn = "号码不能为空";
} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
warn = "手机号格式不正确";
} else {
//当手机号正确的时候提示用户短信验证码已经发送
wx.showToast({
title: '短信验证码已发送',
icon: 'none',
duration: 2000
});
//设置一分钟的倒计时
var interval = setInterval(function () {
currentTime--; //每执行一次让倒计时秒数减一
that.setData({
text: currentTime + 's', //按钮文字变成倒计时对应秒数
})
//如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
if (currentTime <= 0) { clearInterval(interval)
that.setData({
text: '重新发送',
currentTime: 61,
disabled: false,
color: '#929fff'
})
}
}, 100);
};
//判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#929fff'
})
return;
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})