广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序获取手机验证码的方法
  • 342
分享到

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

2024-04-02 19:04:59 342人浏览 安东尼
摘要

本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下 完成手机验证码的功能: (1)效果图如下:  (开始发送验证码)   (重新

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

完成手机验证码的功能:

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

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

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

--结束END--

本文标题: 微信小程序获取手机验证码的方法

本文链接: https://www.lsjlt.com/news/149498.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序获取手机验证码的方法
    本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下 完成手机验证码的功能: (1)效果图如下:  (开始发送验证码)   (重新...
    99+
    2022-11-13
  • 微信小程序实现手机获取验证码倒计时60s
    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!...
    99+
    2022-11-13
  • 小程序获取手机验证码倒计时的方法
    本文实例为大家分享了小程序获取手机验证码倒计时的具体代码,供大家参考,具体内容如下 test: .wxss .bind_input{ width: 450rpx; height: 8...
    99+
    2022-11-13
    小程序手机验证码 小程序获取验证码 小程序验证码倒计时
  • 微信小程序实现手机号码验证
    本文实例为大家分享了微信小程序实现手机号码验证的具体代码,供大家参考,具体内容如下 wxml <form bindsubmit='formSubmit'>   <v...
    99+
    2022-11-13
  • 微信小程序实现手机验证码登录
    我们的微信小程序里面,手机验证码登录已经成为不可缺少的一部门,为此,我写的这个手机验证码登录,这里我结合thinkphp6+微信小程序实现 首先我们进入小程序页面: wxml页面: ...
    99+
    2022-11-13
  • 微信小程序登录及获取手机号码
    前端:微信先授权登录后再授权获取手机号码 后端:先微信登录获取openid返回前端,前端再传递手机号码code给后端获取手机号码并在本地数据量注册用户信息,需提供2个接口 第一步:先通过code微信授权登录获取openid $url = '...
    99+
    2023-08-31
    微信小程序 php
  • 企业微信小程序获取手机号?
    一、确定小程序是开发企业内部应用,还是开发第三方应用。  如果是开发企业内部应用,也就是应用自建的可以使用  wx.qy.getMobile 这个api 去获取手机号wx.qy.getMobile 调用前提: 1、必须先调用过wx.qy.l...
    99+
    2023-09-15
    微信小程序 小程序
  • 微信小程序怎么获取用户的手机号码
    微信小程序中获取用户手机号码的方式有:1.用户页面通过弹出获取;2.在小程序制作页面中,添加登录选项卡,用于获取用户手机号码;微信小程序中获取用户手机号码的方式有以下两种当用户进入小程序后,通过弹出获取手机号提醒,用户点击授权,即可获得用户...
    99+
    2022-10-21
  • 微信小程序获取验证码60秒倒计时功能
    目录效果图index.wxmlindex.jsindex.wxss效果图 index.wxml <view class="Info"> ...
    99+
    2023-05-17
    微信小程序60秒倒计时 微信小程序验证码倒计时
  • 微信小程序如何实现手机验证码登录
    本篇内容介绍了“微信小程序如何实现手机验证码登录”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先我们进入小程序页面:wxml页面:<...
    99+
    2023-06-30
  • 微信小程序实现随机验证码
    本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下 废话不多说,直接上图看效果 一、实现功能 1、点击灰色底的验证码图片可以更换一张验证码 2、验证输...
    99+
    2022-11-13
  • 微信小程序手机号验证码登录的项目实现
    本文主要介绍了小程序手机号验证码登录,具体如下: wxml: <view class="content_bottom"> <form bindsub...
    99+
    2022-11-13
  • 微信小程序canvas2d生成图形验证码的方法
    本文实例为大家分享了微信小程序canvas2d生成图形验证码的具体代码,供大家参考,具体内容如下 成品展示: 背景: 大致看了一下网上已经有一些canvas生成图形验证码的demo...
    99+
    2022-11-13
  • 微信小程序获取用户手机号码的详细步骤
    目录前言接下来我们通过服务器获取授权deciphering解密方法总结前言 我们在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是我们要获取用户的手机号码,通过微信获取...
    99+
    2022-11-13
  • 微信小程序api签名验证的方法
    这篇文章主要讲解了“微信小程序api签名验证的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序api签名验证的方法”吧!用户数据的签名验证和加解密数据签名校验为了确保 开放接口 ...
    99+
    2023-06-26
  • 微信小程序获取手机号的踩坑记录
    前言 最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况。研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮...
    99+
    2022-11-12
  • 微信小程序登录方法之授权登陆及获取微信用户手机号
    目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获...
    99+
    2022-11-13
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2022-11-11
  • 微信小程序获取手机号报错getPhoneNumber:fail no permission
    目录 一、问题描述二、解决方法 ...
    99+
    2023-08-30
    微信小程序 微信认证
  • 微信小程序滑块验证实现方法
    下面给大家介绍下微信小程序滑块验证的效果图及实例代码: 如图: 滑块验证组件 puzzleVerify目录 index.wxml <!-- 滑动验证弹窗 --> &...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作