微信小程序获取手机验证码

一种比较常见的功能获取手机验证码

先看效果图：

 

其实这个功能实现起来很简单，主要就是调取第三方接口，拿到返回值验证的问题

直接上代码吧：

wxml页面：

<view class='changeInfo'>
  <view class='changeInfoName'>
     <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> 
  </view>
  
  <view class='changeInfoName'>
     <input placeholder='请输入手机号' bindinput='getPhoneValue' value='{{phone}}'/> 
  </view>
  <view class='changeInfoName'>
     <input placeholder='请输验证码' bindinput='getCodeValue' value='{{code}}' style='70%;'/> 
     <button class='codeBtn' bindtap='getVerificationCode' disabled='{{disabled}}' >{{codename}}</button>
  </view>
  <button class='changeBtn' bindtap='save'>保存</button>
</view>

wxss页面：

page{
  height: 100%;
  width: 100%;
  background: linear-gradient(#5681d7, #486ec3);
}
.changeInfo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  margin: 50rpx auto;
}
.changeInfoName{
  position: relative;
  height: 80rpx;
  width: 100%;
  border-radius: 10rpx;
  background: #fff;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
}
.codeBtn{
  position: absolute;
  right: 0;
  top: 0;
  color: #bbb;
  width: 30%;
  font-size: 26rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.changeInfoName input{
  width: 100%;
  height:100%;
}
.changeBtn{
  width: 40%;
  height: 100rpx;
  background: #fff;
  color: #000;
  border-radius: 50rpx;
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-left: -20%;
  line-height: 100rpx;
}

js页面：

 
var app = require('../../resource/js/util.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:'',//姓名
    phone:'',//手机号
    code:'',//验证码
    iscode:null,//用于存放验证码接口里获取到的code
    codename:'获取验证码'
  },
  //获取input输入框的值
  getNameValue:function(e){
    this.setData({
      name:e.detail.value
    })
  },
  getPhoneValue:function(e){
    this.setData({
      phone:e.detail.value
    })
  },
  getCodeValue: function (e) {
    this.setData({
      code: e.detail.value
    })
  },
  getCode:function(){
    var a = this.data.phone;
    var _this = this;
    var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])d{8}$$/;
    if (this.data.phone == "") {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    } else if (!myreg.test(this.data.phone)) {
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 1000
      })
      return false;
    }else{
      wx.request({
        data: {},
        'url': 接口地址,
        success(res) {
          console.log(res.data.data)
          _this.setData({
            iscode: res.data.data
          })
          var num = 61;
          var timer = setInterval(function () {
            num--;
            if (num <= 0) {
              clearInterval(timer);
              _this.setData({
                codename: '重新发送',
                disabled: false
              })
 
            } else {
              _this.setData({
                codename: num + "s"
              })
            }
          }, 1000)
        }
      })
      
    }
    
    
  },
  //获取验证码
  getVerificationCode() {
    this.getCode();
    var _this = this
    _this.setData({
      disabled: true
    })
  },
  //提交表单信息
  save:function(){
    var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])d{8}$$/;
    if(this.data.name == ""){
      wx.showToast({
        title: '姓名不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    }
    if(this.data.phone == ""){
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    }else if(!myreg.test(this.data.phone)){
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 1000
      })
      return false;
    }
    if(this.data.code == ""){
      wx.showToast({
        title: '验证码不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    }else if(this.data.code != this.data.iscode){
      wx.showToast({
        title: '验证码错误',
        icon: 'none',
        duration: 1000
      })
      return false;
    }else{
      wx.setStorageSync('name', this.data.name);
      wx.setStorageSync('phone', this.data.phone);
      wx.redirectTo({
        url: '../add/add',
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})