微信小程序怎么實(shí)現(xiàn)綁定手機(jī)號(hào)獲取驗(yàn)證碼功能

小編給大家分享一下微信小程序怎么實(shí)現(xiàn)綁定手機(jī)號(hào)獲取驗(yàn)證碼功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

微信小程序驗(yàn)證碼獲取方式，代碼如下所示：

<!-- 綁定手機(jī)號(hào) -->
<view class='content'>
 <form bindsubmit="formSubmit">
  <view class='phone-box'>
   <text class='phone'>手機(jī)號(hào)</text>
   <input name="phone" type='number' placeholder="請輸入手機(jī)號(hào)" maxlength='11' name="phone" class='number' bindinput='lovePhone' />
  </view>
  <view class='phone-box'>
   <text class='phone'>驗(yàn)證碼</text>
   <input name="phoneCode" placeholder="請輸入驗(yàn)證碼" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" />
   <view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view>
  </view>
  <button formType="submit" class='submit'>綁定</button>
 </form>
</view>
.content {
 width: 100%;
 height: auto;
 padding: 0 50rpx;
 box-sizing: border-box;
}
.phone-box {
 width: 100%;
 height: 89rpx;
 border-bottom: 1rpx solid #efefef;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
}
.phone {
 color: #333;
 margin-right: 60rpx;
 font-size: 28rpx;
}
.number {
 color: #333;
 font-size: 28rpx;
 width: 200rpx;
}
.getNum {
 width:210rpx;
 height:48rpx;
 background:rgba(248, 112, 57, 1);
 border-radius:8rpx;
 font-size:28rpx;
 font-family:PingFang-SC-Medium;
 color:rgba(255, 255, 255, 1);
 line-height:48rpx;
 margin-right:36rpx;
 text-align:center;
}
.submit {
 width: 480rpx;
 height: 80rpx;
 background: rgba(248, 112, 57, 1);
 border-radius: 8rpx;
 margin-top: 80rpx;
 color: #fff;
 font-size: 32rpx;
}
const app = getApp();
Page({
 data: {
  // 驗(yàn)證手機(jī)號(hào)
  loginPhone: false,
  loginPwd: false,
  loveChange: true,
  hongyzphone: '',
  // 驗(yàn)證碼是否正確
  zhengLove: true,
  huoLove: '',
  getText2: '獲取驗(yàn)證碼',
 },
 // 手機(jī)驗(yàn)證
 lovePhone: function (e) {
  let phone = e.detail.value;
  this.setData({ hongyzphone: phone })
  if (!(/^1[34578]\d{9}$/.test(phone))) {
   this.setData({
    lovePhone: false
   })
   console.log(phone.length)
   if (phone.length >= 11) {
    wx.showToast({
     title: '手機(jī)號(hào)有誤',
     icon: 'none',
     duration: 1000
    })
   }
  } else {
   this.setData({
    lovePhone: true
   })
  }
 },
 // 驗(yàn)證碼輸入
 yanLoveInput: function (e) {
  let that = this;
  let yanLove = e.detail.value;
  let huoLove = this.data.huoLove;
  that.setData({
   yanLove: yanLove,
   zhengLove: false,
  })
  if (yanLove.length >= 4) {
   if (yanLove == huoLove) {
    that.setData({
     zhengLove: true,
    })
   } else {
    that.setData({
     zhengLove: false,
    })
    wx.showModal({
     content: '輸入驗(yàn)證碼有誤',
     showCancel: false,
     success: function (res) { }
    })
   }
  }
 },
 // 驗(yàn)證碼按鈕
 yanLoveBtn: function () {
  let loveChange = this.data.loveChange;
  console.log(loveChange)
  let lovePhone = this.data.lovePhone;
  console.log(lovePhone)
  let phone = this.data.hongyzphone;
  console.log(phone)
  let n = 59;
  let that = this;
  if (!lovePhone) {
   wx.showToast({
    title: '手機(jī)號(hào)有誤',
    icon: 'success',
    duration: 1000
   })
  } else {
   if (loveChange) {
    this.setData({
     loveChange: false
    })
    let lovetime = setInterval(function () {
     let str = '(' + n + ')' + '重新獲取'
     that.setData({
      getText2: str
     })
     if (n <= 0) {
      that.setData({
       loveChange: true,
       getText2: '重新獲取'
      })
      clearInterval(lovetime);
     }
     n--;
    }, 1000);
    //獲取驗(yàn)證碼接口寫在這里
    //例子 并非真實(shí)接口
    app.agriknow.sendMsg(phone).then(res => {
     console.log('請求獲取驗(yàn)證碼.res =>', res)
    }).catch(err => {
     console.log(err)
    })
   }
  }
 },
 //form表單提交
 formSubmit(e){
  let val = e.detail.value 
  console.log('val', val)
  var phone = val.phone //電話
  var phoneCode = val.phoneCode //驗(yàn)證碼
 },
})

以上是“微信小程序怎么實(shí)現(xiàn)綁定手機(jī)號(hào)獲取驗(yàn)證碼功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！