12.微信小程序之手机号登录验证倒计时

这是一个很常见的功能啦，一般用于注册。输入姓名、手机号，获取验证码，然后提交。姓名未填写，手机号校验不正确都不可以发送验证码；当点击发送验证码之后，验证码框才可以写入；当验证码长度大于等于4时，确定按钮才可以点击。

一.效果图

1.

2.

 

二.代码

1.code.wxml

<view class="title">请完善信息</view>
<form bindsubmit="formSubmit">
<input bindinput="isName" focus="{{showName}}" name="name" class="myInput" placeholder='请输入姓名'></input>
<input bindinput='isPhone' name="phone" class="myInput" placeholder="请输入手机号"></input>
<view class='verificationCode'>
  <input name="code" disabled='{{verCode}}' bindinput='isCode'  placeholder="验证码"></input>
  <button bindtap='sendCode' disabled="{{showCode}}">{{codeTest}}</button>
</view>
<button class='confirm' disabled="{{showConfirm}}" form-type="submit">确定</button>
</form>

 

2.code.wxss

page{
  background: linear-gradient(45deg,#ee6306, #f8c6a57a);
  background-size:100% 100%;
  font-size: 32rpx;
}
.title{
  text-align: center;
  margin: 100rpx auto;
  color: #FFF;
  font-size: 38rpx;
  letter-spacing: 6rpx;
}
.myInput{
  background: #fff;
  height: 90rpx;
  width: 80%;
  margin: 40rpx auto;
  padding:20rpx;
  box-sizing: border-box;
}
.verificationCode{
  display: flex;
  justify-content: center;
}
.verificationCode input{
  background:#fff;
  height: 90rpx;
  width: 50%;
  padding: 20rpx;
  box-sizing: border-box;
  
}
.verificationCode button{
  font-size: 32rpx;
  line-height:90rpx;
  margin: 0;
  height: 90rpx;
  width: 30%;
  border-radius: 0;
  border: none;
  background: #fe6702;
  color: #fff;
}

.confirm{
  margin-top: 150rpx;
  height: 90rpx;
  width:80%; 
  background: #fe6702;
  color: #fff;
}

3.code.js

Page({
  data: {
    name:'',
    showName:false,
    showCode:true,
    codeTest:'发送验证码',
    currentTime:60,
    showConfirm:true,
    //验证码在未点击发送验证码时不可写，这样就能保证“确定”按钮的效果
    verCode:true
  },
  isName(e){
    this.setData({
      name: e.detail.value
    });
  },

  isPhone(e){
    var name = this.data.name;
    var phone = e.detail.value;
    //校验姓名是否填写，若未填写则将焦点返回姓名栏
    if (name == '') {
      wx.showToast({
        title: '请填写姓名',
        icon: 'none',
        mask: true,
        duration: 2000
      });
      this.setData({
        showName:true
      })
      return;
    }
    //校验手机号是否合法
    if((/^1[34578]\d{9}$/.test(phone))){
      this.setData({
        showCode:false
      })
    }else{
     if(phone.length>=11){
      wx.showModal({
        title: '提示',
        content: '手机号不合法',
        showCancel:false
      })
      return;
     }
    }
  },

  sendCode(e){
    var that = this;
    var currentTime =this.data.currentTime
    this.setData({
      showCode:true,
      codeTest: currentTime+'秒后重发',
      verCode:false

    });
    //倒计时，通过设置一个定时器即可完成
    var timer = setInterval(function(){
      that.setData({
        codeTest: (currentTime - 1)+'秒后重发'
      });
      currentTime--;
      if(currentTime<=0){
        clearInterval(timer);
        that.setData({
          currentTime:60,
          codeTest:'重新发送',
          showCode:false
        });
      }
    },1000)
  },

  isCode(e){
    var code = e.detail.value;
    if(code.length>=4){
      this.setData({
        showConfirm:false
      })
    }
  },
  formSubmit(e){
    wx.showModal({
      title: '提示',
      content: '提交成功',
      showCancel:false
    })
  },

})