微信小程序的登陆验证

9HW0%(XA2SVM4SZKQW49Y`J.png

<view class="bind">
  <view class="section">
    <text>+86</text>
    <input bindinput='loginPhone' placeholder="手机号码" />
  </view>
   <view class="yanzheng">
    <input placeholder="短信验证码" bindinput='yanZhengInput' />
    <button bindinput='yanzhengBtn' bindtap='getNewCode' class="Code {{getCode?'':'disbaled'}}">{{timeNum}}{{timeText}}</button>
  </view>
  <view id='button'>
    <button formType="submit" bindtap="loginBtnClick">登录</button>
  </view>
  <view id="tishi">
    {{infoMess}}
  </view>
</view>

//样式
.bind{
padding: 30px 8%;
}
.section{
  border-bottom: 1px solid #eee;
  height: 30px;
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.disbaled{
  background: #ccc !important;
  color: #eee !important;
  border: 1px solid #999 !important;
}
.section input{
display: inline-block;
text-align: left;
padding-left:20px;
color: #999;
font-size: 12px;
flex: 1;
}
.section text{
  color: #FF6800;
  padding-bottom: 8px;
  width: 100rpx;
}
.yanzheng{
   height: 50px;
   width: 100%;
   padding-top: 8px
}
.yanzheng input{
  border-bottom: 1px solid #eee;
  width: 63%;
  display: inline-block;
  color: #999;
  padding-bottom: 5px;
  font-size: 12px;
}
.yanzheng .Code{
 border: 1px solid #FF6800;
 width: 35%;
 display: inline-block;
 font-size: 12px;
 color: #FF6800;

}
#button button{
  background:#FF6800!important;
  color: #fff!important;
  line-height: 40px 
}
//js
Page({

  /* 页面的初始数据*/
  data: {
    timeText: '获取验证码', //倒计时 
    timeNum:'',
    getCode:true
  },
 /* 验证码倒计时***************************************/
  getNewCode:function(){
    var that = this;
    that.setData({
      getCode: false
    });
    this.changeCodeNum("true");
  },
  changeCodeNum:function(type){

    if ((type && wx.getStorageSync('codeType') == true) || type  == "auto"){
      var that = this;
      that.setData({
        getCode: false
      });

      if (!that.data.timeNum) {
        that.setData({
          timeNum: 60
        })
      }
      var num = that.data.timeNum
      var t = setInterval(function () {

        if (num > 0) {
          num--;
        } else {
          clearTimeout(t);
          num = '';
          that.setData({
            getCode: true,
          })
        }
        var myDate = new Date();
        var mytime = myDate.toLocaleTimeString();
        wx.setStorageSync('codeTime', num)
        wx.setStorageSync('leaveTime', mytime)
        wx.setStorageSync('codeType', that.data.getCode)
        that.setData({
          currentTime: num,
          timeNum: num
        })
      }, 1000);
    }
  },
 // 登录手机验证
  loginPhone: function (e) {
    var phone = e.detail.value;
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      this.setData({
        ajxtrue: false
      })
      if (phone.length >= 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      this.setData({
        ajxtrue: true
      })
    }
  },
  yanZhengInput: function (e) {
    var that = this;
    var yanzheng = e.detail.value;
    var huozheng = this.data.huozheng
    console.log(e.detail.value)
    that.setData({
      yanzheng: yanzheng,
      zhengTrue: false,
    })
    if (yanzheng.length >= 4) {
      if (yanzheng == huozheng) {
        that.setData({
          zhengTrue: true,
        })
      } else {
        that.setData({
          zhengTrue: false,
        })
        wx.showModal({
          content: '输入验证码有误',
          showCancel: false,
          success: function (res) {
          }
        })
      }
    }
  },
/*******/
onLoad: function (options) {
    if(!wx.getStorageSync("codeType")){
      this.setData({
        timeNum: wx.getStorageSync("codeTime"),
        timeType: wx.getStorageSync("codeType")
      })
      this.changeCodeNum("auto");
    }else{
      this.setData({
        timeType: true
      })
    };