微信小程序---完整的验证码获取倒计时效果 ---根据手机号是否符合要求进行判断

 

图示：(为了录屏把计时器调快了  自己吧计时器设成一分钟就行)

 

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;



};

},


})

 

来个容易懂得代码片段

Page({

  data: {
    text: '获取验证码', //按钮文字
    currentTime: 61, //倒计时
    disabled: false, //按钮是否禁用
    phone: '' //获取到的手机栏中的值

  },


  //获取手机栏input中的值

  phoneInput: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },

  //获取验证码按钮事件
  bindButtonTap: function () {
    var that = this;
    var phone = that.data.phone;
    var currentTime = that.data.currentTime
    if (phone == '') {
      wx.showModal({
        title: '提示',
        content: "号码不能为空"
      })
    } else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
      wx.showModal({
        title: '提示',
        content: "手机号格式不正确"
      })
    } else {
      //当手机号正确的时候提示用户短信验证码已经发送 并禁止按钮点击导致定时器多次触发的bug
      that.setData({
        disabled: true, 
        color: '#ccc',
      })
      
      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);
    };


  },
})