微信小程序獲取手機驗證碼的方法

本文實例為大傢分享瞭微信小程序獲取手機驗證碼的具體代碼,供大傢參考,具體內容如下

完成手機驗證碼的功能:

(1)效果圖如下:

 (開始發送驗證碼)  

(重新發送驗證碼)

 (2)需求及思路說明:

  • 輸入正確的11位手機號,使用正則校驗。
  • 校驗手機號的歸屬地—-北京移動(這個根據需求而定)
  • 點擊 “獲取驗證碼” ,獲取成功與失敗,都會以彈框的形式展現,完成倒計時。
  • 倒計時為 ‘0’ 的時候,按鈕文字變成 “重新發送”
  • 當按鈕是 “獲取驗證碼” 和 “重新發送” 的時候,按鈕是可以點擊進行倒計時的  
  • 在倒計時過程中,按鈕是不可點擊的(也就是防止在倒計時的過程中重復點擊)       

.wxml 文件

<block wx:if='{{show_detail_title}}'>
  <view class='show_detail_centent ver_phone_con'>
    <form>
      <view class='show_detail_centent_title ver_title' >驗證</view>
      <view class='error_tip}}' style="{{error_tip == true?'visibility:visible':'visibility: hidden'}}">{{error_tip_txt}}</view>
      <view class='phone_verification'>
      <view class='ver_item'>
        <input type='text' class='phone_number' value="{{telNumber}}" bindinput="input_phone" placeholder-style='color:#cdcdcd' placeholder='請獲取手機號'/>
        <button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>
      </view>
      <view class='last_phone_number  ver_item'>
        <input type='number' class='phone_number' bindinput="input_code" value='{{phone_code}}' placeholder-style='color:#cdcdcd'  placeholder='驗證碼'/>
        <button type="primary" formType="submit" class='get_phone_number' bindtap="getPhoneCode"  disabled='{{code_show}}'>{{login_VerifyCode}}</button>
      </view>
      <button type="primary" formType="submit" class='finish_btn' disabled = '{{finish_show}}' bindtap="submit_finish" >完成</button>
      <view class='phone_tip'>註:辦理******需驗證手機號碼</view>
      </view>
    </form>
  </view>
</block>

.js文件

data:{
    login_VerifyCode: '獲取驗證碼',
    telNumber: '',            // 用戶手機號
    phone_code: '',          // 手機驗證碼
    error_tip: false,        // 獲取手機號、驗證碼的錯誤提示
    error_tip_txt: '',       // 錯誤信息提示內容
     code_show: false,       // 重復點擊 獲取驗證碼
},
// 獲取手機驗證碼
  getPhoneCode: function() {
    if (this.data.login_VerifyCode == '獲取驗證碼' || this.data.login_VerifyCode == '重新發送'){
      let telNumber = this.data.telNumber;
      console.log('獲取驗證碼', telNumber.length);
      console.log(util.regNumber(telNumber));
      if (telNumber == '') {
        this.setData({
          error_tip: true,
          error_tip_txt: '請輸入手機號碼'
        })
      } else if (telNumber.length != 11) {
        this.setData({
          error_tip: true,
          error_tip_txt: '請輸入正確的手機號碼'
        })
      } else {
        //驗證是否是北京移動的手機號碼
        var url = '/v1/broadband/isBJMobiel.do';
        var params = {
          session: wx.getStorageSync('session'),
          phone: telNumber
        }
        httpUtil.postData(url, params, '', (res) => {
          console.log('判斷手機號碼的', res);
          if (res.module == "N") {
            this.setData({
              error_tip: true,
              error_tip_txt: '此手機號非北京移動用戶',
              code_show: true
            })
          } else {
            var url = '/v1/bdbrokerRenewal/authSendMsg.do';
            var params = {
              session: wx.getStorageSync('session'),
              phone: telNumber
            };
            httpUtil.postData(url, params, '', (res) => {
              console.log(res);
              if (res.success) {
                wx.showToast({
                  title: '短信驗證碼發送成功,請註意查收',
                  icon: 'success',
                  duration: 2000
                })
                var total_micro_second = 60;
                // 驗證碼倒計時
                this.count_down(total_micro_second);
              } else {
                that.setData({
                  login_tip: "驗證碼發送失敗,請稍候重試"
                });
              }
            });
          }
        });
      }
    }
  },
// 倒計時 驗證碼
  count_down: function(total_micro_second) { //發送驗證碼按鈕
    var that = this;
    if (total_micro_second <= 0) {
      that.setData({
        login_VerifyCode: "重新發送"
      });
      // timeout則跳出遞歸
      return false;
    } else {
      // 渲染倒計時時鐘
      that.setData({
        login_VerifyCode: total_micro_second + "s"
      });
      total_micro_second--;
      if (that.data.login_timer == true) {
        setTimeout(function() {
          that.count_down(total_micro_second);
        }, 1000)
      } else {
        that.setData({
          login_VerifyCode: "獲取驗證碼"
        });
      }
    }
  },
  // 輸入框失去焦點   手機號
  input_phone: function(e) {
    console.log('手機號碼', e);
    this.setData({
      telNumber: e.detail.value,
      error_tip_txt: ''
    })
    this.color_finish();
  },
  // 輸入框輸入   驗證碼
  input_code: function(e) {
    console.log('驗證碼值', e);
    this.setData({
      phone_code: e.detail.value
    })
    this.color_finish();
  },
  // 完成   提交按鈕顏色變化
  color_finish: function() {
    if (telNumber_status(this.data.telNumber) && code_status(this.data.phone_code)) {
      this.setData({
        finish_show: false
      })
    } else {
      this.setData({
        finish_show: true
      })
    }
  },
 
 
// 判斷全國號段
const regNumber = mobile => {
  var move = /^((134)|(135)|(136)|(137)|(138)|(139)|(147)|(150)|(151)|(152)|(157)|(158)|(159)|(178)|(182)|(183)|(184)|(187)|(188)|(198))\d{8}$/g; //移動
  var link = /^((130)|(131)|(132)|(155)|(156)|(145)|(185)|(186)|(176)|(175)|(170)|(171)|(166))\d{8}$/g; //聯通
  var telecom = /^((133)|(153)|(173)|(177)|(180)|(181)|(189)|(199))\d{8}$/g; //電信
  if (move.test(mobile)) {
    return true;
  } else if (link.test(mobile)) {
    return true;
  } else if (telecom.test(mobile)) {
    return true;
  } else {
    return false;
  }
}

以上根據思路說明,把條理梳理清晰,也就能順利完成。

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: