E企盈营销工具技术服务商 热线:4006-838-530

微信小程序之获取手机验证码

E企盈直播平台营销卖货系统

完成手机验证码的功能:(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;  }}以上根据思路说明,把条理梳理清晰,也就能顺利完成。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序之获取手机验证码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏