您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现获取手机号60s倒计时_javascript技巧_
2023-05-24
403人已围观
简介 微信小程序实现获取手机号60s倒计时_javascript技巧_
本文实例为大家分享了微信小程序实现获取手机号60s倒计时的具体代码,供大家参考,具体内容如下
1.效果:点击获取》60s倒计时》重新获取

2.wxml
手机号 验证码
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: '' }) } }) }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 如何解决el-checkbox选中状态更改问题_vue.js_
- JavaScript中Map与Object应用场景_JavaScript_
- 微信小程序自定义复选框_javascript技巧_
- VueUse功能精简你的dependencies_vue.js_
- vue开发中后台系统复杂表单优化技巧_vue.js_
- 如何解决React useEffect钩子带来的无限循环问题_React_
- Pinia.js状态管理器上手使用指南_vue.js_
- 使用el-checkbox-group选中后值为true和false遇到的坑_vue.js_
- 详解如何在Vue中动态添加类名_vue.js_
- 微信小程序实现多文件或者图片上传_javascript技巧_
