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

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

获取验证码

【简要说明】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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,324评论 0 5
  • 第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么?增强页面动态效果(...
    张中华阅读 1,395评论 4 10
  • 一、事件 JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素...
    大嘴蝸牛阅读 657评论 0 2
  • 1.林黛玉——玉带林中挂 《枉凝眉》——一个是阆苑仙葩,一个是美玉无瑕。若说没奇缘,今生偏又遇着他; 若说有奇缘,...
    王瓜瓜去污皂阅读 702评论 0 7