微信小程序 获取验证码60s倒计时

来自:互联网
时间:2019-08-24
阅读:
免费资源网 - https://freexyz.cn/

验证码倒计时,手机号格式校验。

验证码倒计时,手机号格式校验

【简要说明】code字段在获取验证码之前显示验证码,点击获取验证码后显示倒计时数字。``用来拼接字符串,格式为字符串${data}。设置每1s执行一次减秒计数,setInterval(function(){}, 1000);当秒数为0的时候用clearInterval()结束减秒。

data: {
  count:60,
  code:'获取验证码',
  iPhoneValue:' ', //手机号码
}

textCode: function () {
  let that = this
  // 手机号码格式验证
  if (!(/^1[3456789]d{9}$/.test(that.data.iphoneValue))) {
    wx.showToast({
      title: '输入手机号有误',
      icon: 'none',
      duration: 2000
    })
    return;
  }
  if(that.data.code !== '获取验证码'){
    return
  }
  const countDown = setInterval(() => {
  if(that.data.count <= 0){
    that.setData({
      count:60,
      code:'获取验证码'
    })
    clearInterval(countDown)
      return
    }
    that.data.count --
    that.setData({
      count: that.data.count,
      code: that.data.count < 10 ? `请等待0${that.data.count}s` : `请等待${that.data.count}s`
    })
  },1000);
  // 调用验证码接口
  that.textCode_http()
}

WXML(随意写的demo代码不规范,看得懂就好哈)

<view style='display:flex;flex-direction: row;'>
  <view style='padding:10px;'>
    <text style='font-size:14px;color:#333;'>手机号:</text>
  </view>
  <view style='flex:1;padding:10px;'>
    <input placeholder='请输入手机号' placeholder-style='color:#999;font-size:12px;' style='color:#333;font-size:14px;' type='number' bindinput="Input_iphone" maxlength="11"></input>
  </view>
  <view style='padding:10px;' bindtap='textCode'>
    <text class='store_quan'>{{code}}</text>
  </view>
</view>
免费资源网 - https://freexyz.cn/
返回顶部
顶部