前端获取验证码

1. 设置验证码按钮

//opacity是为了让用户点击一次获取验证码后让按钮颜色变淡,并倒计时显示60秒
//timer 一开始默认值为 ‘获取验证码‘
<view style="opacity: {{opacity}}" bindtap=sendCodeClick>{{timer}}</view>

 

2. 调用验证码接口,并传入手机号

    //获取验证码
    getCode = function () {
     //一般短信验证码获取主要是传入手机号,有不同需求还可以传不同值
      var data={
        mobile:that.data.mobile, //手机号
        type:1,
      }
      //后端功能接口问公司后台人员要
      //调用接口,我个人后台接口进行了Promise,这边主要是调用获取验证码接口,并通过res来判断是否发生成功
      sendCode(data).then(res=>{
        wx.showToast({
          title: 发送成功,
          icon: success,
          duration: 1000
        });
      })
    }

 

3. 验证码按钮事件sendCodeClick

  sendCodeClick: function () {
    var that = this;
    if (that.data.timer != 获取验证码) { 
      //判断有没有点击获取验证码按钮,有点击的话会把获取验证码按钮的文字变为还剩多少秒
      //在倒计时结束前都不能再进行获取验证码操作
      return false;
    }
    if (that.data.mobile == ‘‘) { //如果电话等于空提示请输入手机号
      wx.showModal({
        title: 提示,
        confirmColor: #0661F6,
        content: 请输入手机号码,
        showCancel: false
      })
      return;
    }
    if (!(/^1[3456789]\d{9}$/.test(that.data.mobile))) { 
      //对输入的手机号进行正则匹配,看是否符合格式,如果不符合进行弹窗提示
      wx.showModal({
        title: 提示,
        content: 手机号码格式不正确,
        confirmColor: #0661F6,
        showCancel: false
      });
      return;
    } 
    getCode(); //如果都没以上问题就可以正确调用发送getCode()方法
    var time = 60;  //初始化一个倒计时时间
    var setTime = function () {    //设置倒计时方法
      if (time > 0) {   //如果时间还大于0就是倒计时还没结束
        setTimeout(function () {   //定时器
          time--;   //每次减一秒
          that.setData({  //减完并设置按钮显示文字timer为还剩多少秒,并让按钮颜色变淡
            timer: 还剩 + time + ,
            opacity: 0.43
          })
          setTime(); //递归调用,重复执行定时器操作直到时间为0退出
        }, 1000);
      } else {  //退出定时后,把按钮文字重新设置为获取验证码,按钮设置为完全显示
        that.setData({
          timer: 获取验证码,
          opacity: 1
        })
      }
    }
    setTime();   //执行倒计时方法
  },

 

前端获取验证码

上一篇:Qt开启和关闭蓝牙


下一篇:分布式事务方案