微信小程序實現(xiàn)獲取手機號60s倒計時

更新時間：2022年07月07日 17:25:11 作者：asteriaV

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)獲取手機號60s倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)獲取手機號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({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? 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位純數(shù)字驗證碼
? ? 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: ''?
? ? ? ? })
? ? ? }
? ? })
?
? },
??
?
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: