小程序验证手机号页面及逻辑处理

    前言：

           常用页面以及组件模板------手机号验证以及绑定

           我们获取的微信用户信息，只是存储在微信服务器的基本信息，但是在很多的应用中，我们需要绑定到用户手机号来进行更多的业务逻辑，今天就给出一个简单的页面demo。

        效果图：

     

页面效果就是这样，接下来上代码

 

bindPhone.wxml

<import src="../../template/loading/index.wxml" />
<template is="Loading" data="{{Loading}}" />
<view class="bindPhoneTitle">
  验证手机号
</view>

<form bindsubmit='formSubmit'>
  <view class="formItemPhone">
    <label>手机号</label>
    <input name="phone" placeholder="请输入手机号" data-id="phone"
           placeholder-class='inputClass' bindinput='Input' />
  </view>
  <view class="formItemPhone">
    <label>验证码</label>
    <input name="code" placeholder="请输入验证码" data-id="code"
           placeholder-class='inputClass' bindinput='Input' />
    <button class='codeBtn' wx:if="{{!isGetCode}}"
            catchtap='getPhoneCode'>{{btnTxt}}</button>
    <text class='code_toast' wx:else>{{countDown}}s</text>
  </view>

  <button class='formBtn {{formData.phone&&formData.code?"active":""}}'
          formType="submit">确定</button>
</form>

bindPhone.wxss

@import '../../template/loading/index.wxss';
.bindPhoneTitle {
  width: 90%;
  padding: 50rpx 5% 127rpx;
  font-size: 48rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.formItemPhone {
  width: 90%;
  margin: 0 5%;
  padding: 0 0 20rpx;
  border-bottom: 1px solid rgba(226, 228, 232, 1);
  margin-bottom: 40rpx;
  position: relative;
}

.formItemPhone label {
  display: inline-block;
  width: 25%;
  vertical-align: middle;
  margin-right: 10%;
  font-size: 32rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.formItemPhone input {
  display: inline-block;
  width: 65%;
  vertical-align: middle;
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.inputClass {
  font-size: 32rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(189, 199, 210, 1);
}



.codeBtn {
  position: absolute;
  right: 0;
  bottom: 20rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 139, 0, 1);
  background: transparent;
  padding: 0;
  border: none;
  outline: medium;
  border-radius: 0;
  z-index: 1000;
}

.codeBtn::after {
  border: none;
  outline: medium;
  border-radius: 0;
}

.code_toast {
  position: absolute;
  right: 15rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(189, 199, 210, 1);
}

.formBtn {
  width: 90%;
  height: 88rpx;
  background: rgba(189, 199, 210, 1);
  border-radius: 44rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border: none;
  outline: medium;
  margin-top: 175rpx;
}

.formBtn::after {
  border: none;
  outline: medium;
  border-radius: 44rpx;
}

.formBtn.active {
  background: rgba(255, 139, 0, 1);
  color: rgba(255, 255, 255, 1);
}

bindPhone.js

import PublicFun from '../../utils/PublicFun.js';
const  phoneRexp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
Page({
  data: {
    btnTxt: '获取验证码',
    isGetCode: false,
    Loading: false,
    countDown: 60,
    formData: {
      phone: '',
      code: ''
    }
  },
  onLoad(options) {

  },
 
  formSubmit(e) {
    let that = this,
        formData = e.detail.value,
        errMsg = '';
    that.setData({
      Loading: true
    })
    if (!formData.phone){
      errMsg = '手机号不能为空！';
    }
    if (!formData.code){
      errMsg = '验证码不能为空！';
    }
    if (formData.phone){
      if (!phoneRexp.test(formData.phone)) {
        errMsg = '手机号格式有误！';
      }
    }
    if (errMsg){
      that.setData({
        Loading: false
      })
      PublicFun._showToast(errMsg);
      return false
    }
    //连接服务器进行验证码手机号验证操作
    setTimeout(()=>{
      that.setData({
        Loading: false
      })
    },1500)
  },
  getPhoneCode() {
    let that = this,
        formData = that.data.formData,
        errMsg = '' ;
    errMsg = !formData.phone ? '手机号不能为空！' :
        formData.phone && !phoneRexp.test(formData.phone) ? '手机号格式有误！' :
        '' ;
    if (errMsg){
      PublicFun._showToast(errMsg);
      return false
    }
    that.timer();
     //连接服务器进行获取验证码操作
    that.setData({
      isGetCode: true
    })
  },
  timer() {//验证码倒计时
    let that = this,
      countDown = that.data.countDown;
    let clock = setInterval(() => {
      countDown--
      if (countDown >= 0) {
        that.setData({
          countDown: countDown
        })
      } else {
        clearInterval(clock)
        that.setData({
          countDown: 60,
          isGetCode: false,
          btnTxt: '重新获取'
        })
      }
    }, 1000)
  },
  Input(e) {//输入检索
    let that = this,
        formData = that.data.formData,
        inputType = e.currentTarget.dataset.id,
        inputValue = e.detail.value;
    inputType === 'phone' ? 
        formData.phone = inputValue : formData.code = inputValue;
    that.setData({
      formData
    })

  }
})

附带：

PublicFun.js

function _showToast(title) {
  wx.showToast({
    icon: "none",
    title: title
  })
}

module.exports ={
  _showToast

}

Loading文件为模板文件，方便多次调用

    loading.wxml

<template name="Loading">
  <view class="loading_box" wx:if="{{Loading}}" style='background: {{Class==="show"?"rgba(0, 0, 0, 0)":"rgba(255, 255, 255, .7)"}};'>
    <view class="loading_items">
      <view class="loading3 loading3_1"></view>
      <view class="loading3 loading3_2"></view>
      <view class="loading3 loading3_3"></view>
    </view>
  </view>
</template>

loading.wxss

.loading_box {
  width: 100%;
  height: 100%;
  position: fixed;
  
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.loading_items{
  text-align: center;
  padding: 55% 0;
}

.loading_items>view {
  display: inline-block;
}

.loading3 {
  width: 20rpx;
  height: 20rpx;
  background: #ff8b00;
  border-radius: 50%;
  margin-left: 15rpx;
}

.loading3_1 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
}

.loading3_2 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
  animation-delay: 0.5s;
}

.loading3_3 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
  animation-delay: 1s;
}

@-webkit-keyframes loading3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes loading3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}