2021-06-30

微信小程序实现短信验证码模拟登录

    在使用微信小程序的过程中，很多时候需要用户填写用户电话号码并点击送验证码进行登录，本文就来简单的实现。

1.模拟用户登录流程图如下：

2.页面效果图（比较简单）

页面实现代码如下：

//login.wxml
<form bindsubmit='formSubmit'>
  <view class='form'>
    <text class='label'>电话：</text>
    <input placeholder="请输入电话号码" bindblur="checkPhone" class='phone_input' name="phone" type="number" maxlength="11"
      ></input>
    <text class='label'>验证码：</text>
    <input placeholder="请输入验证码" class='code_input' name="code" bindchange="inputCode"></input>
  </view>
  <button class='submit' formType="submit" type="primary">登录</button>
</form>

//login.js
.phone_input {
  border: 1rpx solid #533939;
  height: 60rpx;
}
.code_input {
  border: 1rpx solid #533939;
  height: 60rpx;
}
.submit {
  margin-top: 20rpx;
}

3.实现过程功能介绍

（1）正则表达式校验电话号码

     正则表达式校验电话号码长度，当用户输入电话号码不合法时会做出相应的提示。

     如下图所示：

     实现代码如下：

let phoneNumber = e.detail.value
    this.setData({
      phoneNumber:phoneNumber
    })
    let str = /^1\d{10}$/
    if (str.test(phoneNumber)){
    //校验正确后...
    }

（2）判断电话号码是否存在

    当用户输入电话号码满足正则表达式规则后，同样会判断所输入电话号码在数据库中是否存在，存在可进行下一步操作，不存在则会提示用户。
    如下图所示，数据库中用户不存在则会提示该手机号未注册：

实现代码如下：

checkPhone(e) {
    let phoneNumber = e.detail.value
    this.setData({
      phoneNumber:phoneNumber
    })
    let str = /^1\d{10}$/
    if (str.test(phoneNumber)) {
      wx.cloud.database().collection("phone").where({
        phone_num:phoneNumber
      }).get().then(res=>{
        if(res.data.length==0){
          wx.showToast({
            title: '该手机号未注册',
            icon:"none"
          })
        }else{
          let code=this.data.code
        }
      }).catch(res=>{
        console.log(res)
        wx.showToast({
          title: '该手机号未注册',
          icon:"none"
        })
      })
    } else {
      wx.showToast({
        title: '输入手机号有误',
        icon:"error"
      })
      return false
    }
  }

（3）短信验证码校验

    此处短信验证码暂时写死为1111，到后期会以真实短信验证码实现登录功能，当用户输入电话号码在数据库中存在以及短信验证码输入正确后，就会以提示用户登录成功。
    实现效果图如下：

实现代码如下：

formSubmit(e) {
    var code = e.detail.value.code;
    this.setData({
      code:code
    })
    if(code==''||code.replace(/\s+/g, '')==''){
      wx.showToast({
        title: '验证码格式有误',
        icon:"error"
      })
    }else if(code==="1111"){
      wx.showToast({
        title: '登录成功',
      })
    }else{
      wx.showToast({
        title: '验证码输入错误',
        icon:'error'
      })
    }
    }

4.总结

    微信小程序实现短信验证码模拟登录实现比较简单，值得注意的是在前端页面中需要使用失去焦点函数对电话号码进行校验。