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

本文实例为大家分享了微信小程序获取手机验证码的具体代码，供大家参考，具体内容如下

完成手机验证码的功能：

（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;   } }

以上根据思路说明，把条理梳理清晰，也就能顺利完成。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。

您可能感兴趣的文章:

微信小程序实现手机验证码登录
微信小程序实现手机获取验证码倒计时60s
微信小程序手机号验证码登录的项目实现
微信小程序绑定手机号获取验证码功能
微信小程序实现基于三元运算验证手机号/姓名功能示例
微信小程序如何获取手机验证码
微信小程序手机号码验证功能的实例代码
微信小程序功能函数小结(手机号验证*、密码验证*、获取验证码*)
微信小程序实现手机号码验证

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

知秋君

相关推荐