1. 程式人生 > >微信小程式---完整的驗證碼獲取倒計時效果 ---根據手機號是否符合要求進行判斷

微信小程式---完整的驗證碼獲取倒計時效果 ---根據手機號是否符合要求進行判斷

提示:按鈕的設定不要要view標籤代替  因為view沒有禁用屬性

圖示:(為了錄屏把計時器調快了  自己吧計時器設成一秒就行)



wxml程式碼:

<view class='shouji_info'><view class='info_list'><input placeholder='請輸入手機號' bindinput="phoneInput"></input></view><view class='info_list'><input class='left' placeholder='驗證碼'></input>
<button class='right yanzheng_btn' bindtap="bindButtonTap" disabled='{{disabled}}' style="background-color:{{color}}">{{text}}</button></view></view>wxss程式碼:page{font-size: 30rpx;}.left{ float: left}.right{float: right}.info_list {height: 103rpx;line-height: 103rpx;width: 100%;border-bottom:
1px solid #bcbcbd;
padding-left: 24rpx;display: inline-block;font-size: 33rpx;}.shouji_info input {margin-top: 25rpx;/* background: rebeccapurple; */}.yanzheng_btn {width: 207rpx;background: #929fff;margin-right: 20rpx;height: 82rpx;margin-top: 12rpx;text-align: center;line-height: 82rpx;border-radius: 15
rpx;
color: #fff;font-size: 33rpx;padding: 0 10rpx;}

js程式碼

// pages/biji/biji.jsPage({/*** 頁面的初始資料*/data: {text: '獲取驗證碼', //按鈕文字currentTime: 61, //倒計時disabled: false, //按鈕是否禁用phone: '' //獲取到的手機欄中的值},//獲取手機欄input中的值phoneInput: function (e) {this.setData({phone: e.detail.value})},//獲取驗證碼按鈕bindButtonTap: function () {var that = this;that.setData({disabled: true, //只要點選了按鈕就讓按鈕禁用 (避免正常情況下多次觸發定時器事件)color: '#ccc',})var phone = that.data.phone;var currentTime = that.data.currentTime //把手機號跟倒計時值變例成js值var warn = null; //warn為當手機號為空或格式不正確時提示使用者的文字,預設為空if (phone == '') {warn = "號碼不能為空";} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {warn = "手機號格式不正確";} else {//當手機號正確的時候提示使用者簡訊驗證碼已經發送wx.showToast({title: '簡訊驗證碼已傳送',icon: 'none',duration: 2000});//設定一分鐘的倒計時var interval = setInterval(function () {currentTime--; //每執行一次讓倒計時秒數減一that.setData({text: currentTime + 's', //按鈕文字變成倒計時對應秒數})//如果當秒數小於等於0時 停止計時器 且按鈕文字變成重新發送 且按鈕變成可用狀態 倒計時的秒數也要恢復成預設秒數 即讓獲取驗證碼的按鈕恢復到初始化狀態只改變按鈕文字if (currentTime <= 0) { clearInterval(interval)that.setData({text: '重新發送',currentTime: 61,disabled: false,color: '#929fff'})}}, 100);};//判斷 當提示錯誤資訊文字不為空 即手機號輸入有問題時提示使用者錯誤資訊 並且提示完之後一定要讓按鈕為可用狀態 因為點選按鈕時設定了只要點選了按鈕就讓按鈕禁用的情況if (warn != null) {wx.showModal({title: '提示',content: warn})that.setData({disabled: false,color: '#929fff'})return;};},/*** 生命週期函式--監聽頁面載入*/onLoad: function (options) {},})