一種比較常見的功能獲取手機驗證碼

先看效果圖：

其實這個功能實現起來很簡單，主要就是調取第三方介面，拿到返回值驗證的問題

直接上程式碼吧：

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='width: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 () {
  
  }
})