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

布满荆棘的人生 2022-04-17 02:12 193阅读 0赞

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

# 一.效果图 #

1.![20181111221537741.png][]

2.![20181111221651211.png][]

# 二.代码 #

## 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
        })
      },
    
    })

[20181111221537741.png]: /images/20220417/6a7bf96a71c244d487c9058313bbbd2d.png
[20181111221651211.png]: /images/20220417/a39faf91f4c34d069fdc62db0e461171.png