微信小程序实现获取手机号60s倒计时

 更新时间:2022年07月07日 17:25:11   作者:asteriaV  
这篇文章主要为大家详细介绍了微信小程序实现获取手机号60s倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下

1.效果:点击获取》60s倒计时》重新获取

2.wxml

<view class="cu-form-group" style="border-top: 1rpx solid #eee;">
      <view class="title">手机号</view>
      <input name='phone' placeholder="请输入新手机号"  value="{{phone}}" type="number" bindinput="inputBindPhone" ></input>
    </view>  
 
<view class="cu-form-group" style="border-bottom: 1rpx solid #eee;">
      <view class="title">验证码</view>
      <input name='code' placeholder="请输入验证码" value="{[code]}" type="number" bindinput="inputBindCode"></input>
      <button class="cu-btn shadow {{disabled ? '':'bg-blue'}}" style="width:180rpx;height:72rpx;"   bindtap='sendRegistCode'>{{time}}</button>
</view>

3.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    disabled:false,
    time: '点击获取',
    currentTime: 60,
    phone: '',
    code: '',
  },
 
  
  // 新手机号
  inputBindPhone: function (e) {
    console.log(e.detail.value)
    this.setData({
      phone: e.detail.value
    })
  },
  // 验证码
  inputBindCode: function (e) {
    console.log(e.detail.value)
    this.setData({
      code: e.detail.value
    })
  },
 
  sendRegistCode: function(e){
    var that = this;
    var currentTime = that.data.currentTime;
      var interval;
      that.setData({
        time: currentTime + 's',
        disabled: true,
      })
      interval = setInterval(function () {
        that.setData({
          time: (currentTime - 1) + ' s'
        })
        currentTime--;
        if (currentTime <= 0) {
          clearInterval(interval)
          that.setData({
            time: '重新获取',
            currentTime: 60,
            disabled: false
          })
        }
      }, 1000)
},
 
 
  formSubmit: function (e) {
    var that = this,
      value = e.detail.value,
      formId = e.detail.formId;
    // value.phone = this.data.phone
    // value.code = this.data.code
 
 
    var mPattern = /^1[3-9]\d{9}$/; //手机号码
    var authReg = /^\d{4}$/; //4位纯数字验证码
    var notempty = /^\\S+$/; //非空
 
    if (this.data.phone == '' || this.data.phone == undefined) {
      return wx.showToast({
        title: '请输入手机号码',
        icon: 'none'
      })
    } else if (!mPattern.test(this.data.phone)) {
      return wx.showToast({
        title: '请输入正确的手机号码',
        icon: 'none'
      })
 
    } else {
      value.phone = this.data.phone
      console.log('value.phone', value.phone)
    }
 
 
    if (value.code == '' || value.code == undefined) {
      return wx.showToast({
        icon: 'none',
        title: '请输入验证码',
      });
    } else if (!authReg.test(this.data.code)) {
      return wx.showToast({
        title: '请输入正确的验证码',
        icon: 'none'
      })
 
    } else {
      value.code = this.data.code
      console.log('value.code', value.code)
    }
 
 
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000,
      success: function () {
         console.log(value)
        that.setData({
          code: '',
          phone: '' 
        })
      }
    })
 
  },
  
 
})

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

相关文章

  • javascript动态生成树形菜单的方法

    javascript动态生成树形菜单的方法

    这篇文章主要介绍了javascript动态生成树形菜单的方法,涉及JavaScript针对页面元素与属性的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • JavaScript面试必备技巧之手写一个Promise

    JavaScript面试必备技巧之手写一个Promise

    很多同学在面试的时候都会被要求手写一个Promise,那么今天我总结了一些手写Promise的方法,可以跟着我的思路一起来实现一个Promise,让我们的面试更有把握
    2023-02-02
  • 微信小程序对接七牛云存储的方法

    微信小程序对接七牛云存储的方法

    本篇文章主要介绍了小程序对接七牛云存储的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript实现筛选数组

    JavaScript实现筛选数组

    这篇文章主要为大家详细介绍了JavaScript实现筛选数组,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 基于JS实现父组件的请求服务过程解析

    基于JS实现父组件的请求服务过程解析

    这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 浅谈JS for循环中使用break和continue的区别

    浅谈JS for循环中使用break和continue的区别

    这篇文章主要介绍了浅谈for循环中使用break和continue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)

    微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)

    这篇文章主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动,右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • Echarts地图添加引导线效果(labelLine)

    Echarts地图添加引导线效果(labelLine)

    这篇文章主要介绍了Echarts地图添加引导线效果(labelLine),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解jQuery事件

    详解jQuery事件

    本文主要介绍了jQuery事件的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Lottie动画前端开发使用技巧

    Lottie动画前端开发使用技巧

    这篇文章主要为大家介绍了Lottie动画前端开发使用技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论