微信小程序中input輸入及動態設置按鈕的實現方法-創新互聯
這篇文章給大家分享的是有關微信小程序中input輸入及動態設置按鈕的實現方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
微信小程序 input輸入及動態設置按鈕的實現
【需求】實現當手機號已填寫和協議已勾選時，“立即登錄”按鈕變亮，按鈕可點擊；若有一個不滿足，按鈕置灰，不可點擊；實現獲取短信驗證碼，倒計時提示操作；對不滿足要求內容進行toast彈窗提示。
<view class="container">
<!--手機號-->
<view class="section">
<text class="txt">手機號</text>
<input value="{{mobile}}" placeholder-class="placeholder" placeholder="11位手機號碼" type="number" maxlength="11"
bindinput="mobileInput"/>
</view>
<!--圖片驗證碼-->
<view class="section">
<view>
<text class="txt">圖形驗證碼</text>
<input placeholder-class="placeholder" placeholder="輸入圖形驗證碼" type="text" maxlength="4"
bindinput="imgCaptchaInput"/>
</view>
<image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>
</view>
<!--短信驗證碼-->
<view class="section">
<view>
<text class="txt">驗證碼</text>
<input placeholder-class="placeholder" placeholder="輸入驗證碼" type="number" maxlength="6"
bindinput="smsCaptchaInput"/>
</view>
<view class="smsBtn" bindtap="getSMS">{{captchaText}}</view>
</view>
<view class="agree" style="margin-top:40rpx">
<checkbox-group bindchange="checkboxChange">
<checkbox class="check" value="1" checked="true" bindchange="checkboxChange"></checkbox>
</checkbox-group>
<span>已閱讀并同意</span> <text style="color:#98c7ff" bindtap="xieyi">《用戶使用協議》</text>
</view>
<view class="regist {{phoneAll&&checkAgree?'active':''}}" bindtap="regist">立即登錄</view>
</view>
<!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
<!--以下為toast顯示的內容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
<view class="toast_content">
<view class="toast_content_text">
{{toastText}}
</view>
</view>
</view>js
// 獲取全局應用程序實例對象
const app = getApp()
Page({
data: {
//toast默認不顯示
isShowToast: false,
mobile: '',
imgCode: '',
code: '',
// inviteCode: '',
errorContent: '請輸入手機號',
timer: 60,
captchaText: '獲取驗證碼',
captchaSended: false,
isReadOnly: false,
capKey: '',
sendRegist: false,
imgCodeSrc: '',
phoneAll: false,
checkAgree:true,
checkboxValue:[1],
},
// 顯示彈窗
showToast(txt, duration = 1500) {
//設置toast時間，toast內容
this.setData({
count: duration,
toastText: txt
});
var _this = this;
// toast時間
_this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
// 顯示toast
_this.setData({
isShowToast: true,
});
// 定時器關閉
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
// 雙向綁定mobile
mobileInput(e) {
this.setData({
mobile: e.detail.value
});
if(this.data.mobile.length===11){
this.setData({
phoneAll: true
});
}else if(this.data.mobile.length<11){
this.setData({
phoneAll: false
});
}
},
// 雙向綁定img驗證碼
imgCaptchaInput(e) {
this.setData({
imgCode: e.detail.value
});
},
// 雙向綁定sms驗證碼
smsCaptchaInput(e) {
this.setData({
code: e.detail.value
});
},
// 同意協議
checkboxChange(e) {
this.data.checkboxValue = e.detail.value;
if(this.data.checkboxValue[0]==1){
this.setData({
checkAgree: true
});
}else {
this.setData({
checkAgree: false
});
}
},
// 獲取短信驗證碼
getSMS() {
var that = this.data;
if (!that.mobile) {
this.showToast('請輸入手機號');
} else if (that.mobile.length != 11 || isNaN(that.mobile)) {
this.showToast('請輸入正確手機號');
}
else if (that.imgCode.length != 4) {
this.showToast('請輸入正確圖片驗證碼');
}
else {
if (that.captchaSended) return;
this.setData({
captchaSended: true
})
app.api.getSMSByMobileAndCaptcha({
mobile: that.mobile,
capKey: that.capKey,
code: that.imgCode,
type:1
}).then((result) => {
this.showToast(result.message);
if (result.code != 1) {
this.getImgCode();
this.setData({
captchaSended: false,
});
} else {
var counter = setInterval(() => {
that.timer--;
this.setData({
timer: that.timer,
captchaText: `${that.timer}秒`,
isReadOnly: true
});
if (that.timer === 0) {
clearInterval(counter);
that.captchaSended = false;
that.captchaText = '獲取驗證碼';
this.setData({
timer: 60,
captchaText: '獲取驗證碼',
captchaSended: false
})
}
}, 1000);
}
});
}
},
// 獲取圖形碼
getImgCode() {
var capKey = "zdx-weixin" + Math.random();
this.setData({
imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey,
capKey: capKey
});
},
//用戶使用協議
xieyi() {
wx.navigateTo({
url: '../userXieyi/userXieyi'
})
},
// 注冊
regist() {
var that = this.data;
if(!that.checkAgree||!that.phoneAll){
return
}
// sessionCheck為1，目的是防止微信code碼先于session過期
var code = wx.getStorageSync('wxCode');
var sessionCheck = wx.getStorageSync('sessionCheck');
wx.setStorageSync('mobile',that.mobile);
if (!that.mobile) {
this.showToast('請輸入手機號');
} else if (that.mobile.length != 11 || isNaN(that.mobile)) {
this.showToast('請輸入正確手機號');
} else if (that.code.length != 6) {
this.showToast('請輸入正確驗證碼');
} else {
wx.showLoading({
title: '加載中...',
});
app.api.loginByCaptcha({
mobile: that.mobile,
smsCode: that.code,
code: code,
sessionCheck:sessionCheck,
}).then((res) => {
wx.hideLoading();
if (res.code == 2||res.code==1) {
//注冊成功
wx.setStorageSync('token', res.businessObj.token);
wx.setStorageSync('userId',res.businessObj.userId);
this.sucessCb(res);
app.globalData.isLogin = true; //設置為登錄成功
} else {
this.showToast(res.message);
}
});
}
},
// 成功回調
sucessCb(res) {
wx.redirectTo({
url: '/pages/index/index'
})
},
onLoad: function () {
this.getImgCode();
var that=this;
if(wx.getStorageSync('mobile')){
that.setData({
mobile: wx.getStorageSync('mobile'),
})
}
if(this.data.mobile.length===11){
this.setData({
phoneAll: true
});
}
},
})感謝各位的閱讀！關于“微信小程序中input輸入及動態設置按鈕的實現方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
文章名稱：微信小程序中input輸入及動態設置按鈕的實現方法-創新互聯
文章網址：http://www.js-pz168.com/article0/gdgoo.html
成都網站建設公司_創新互聯，為您提供網站維護、面包屑導航、網站收錄、做網站、網站設計、外貿建站
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 深度分析影響企業網站排名因素 2021-09-14
- 做網站排名哪家公司比較專業 2020-11-23
- 百度快照網站排名優化技巧 2014-10-31
- 做SEO網站排名別忽略了網站性能優化 2023-04-29
- 提升網站排名的6個技巧 2023-02-13
- seo優化方案-網站排名的核心技術是什么？ 2020-11-26
- 設計為什么影響移動端網站排名優化效果 2016-08-31
- 網站排名堪憂，應怎么優化 2016-10-31
- 【網站優化】seo外鏈怎么做？如何通過外鏈提升網站排名及權重 2022-04-27
- 百度快照推廣全面認知搜索引擎優化排名法則，才有掌握做網站排名 2023-01-17
- 網站排名好沒有流量原因在哪 2015-12-23
- 企業網站排名低是有哪些原因引起? 2015-06-08