微信小程序批量監(jiān)聽(tīng)輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼
在input組件上綁定data-model="xxx" bindinput="inputWatch",
監(jiān)聽(tīng)輸入框輸入:
<input placeholder="請(qǐng)輸入6~12位密碼" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" class="form-item-input"></input> inputWacth: function (e) { let item = e.currentTarget.dataset.model; this.setData({ [item]: e.detail.value }); }
當(dāng)輸入11位手機(jī)號(hào)后,驗(yàn)證碼按鈕變?yōu)榭牲c(diǎn)狀態(tài);當(dāng)3個(gè)輸入框都有值時(shí)(密碼大于等于6位,手機(jī)11位),保存按鈕變?yōu)榭牲c(diǎn)狀態(tài)。
<form bindsubmit="formPhone" wx:else> <view class="form-wrap"> <view class="flex form-item"> <view class="form-item-text">密碼</view> <input placeholder="請(qǐng)輸入6~12位密碼" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" class="form-item-input"></input> </view> <view class="flex form-item"> <view class="form-item-text">新手機(jī)</view> <input placeholder="請(qǐng)輸入新手機(jī)號(hào)" name="account" value="{{account}}" data-model="account" bindinput="inputWacth" maxlength="11" type="number" class="form-item-input"></input> <button class="form-item-btn" catchtap="sendCode" data-account="{{account}}" disabled="{{codeDisabled}}">{{codeText}}</button> </view> <view class="flex form-item"> <view class="form-item-text">驗(yàn)證碼</view> <input placeholder="請(qǐng)輸入驗(yàn)證碼" name="verification" data-model="verification" bindinput="inputWacth" maxlength="6" class="form-item-input"></input> </view> </view> <view class="default-btn-wrap"> <button class="default-btn" loading="{{loading}}" form-type="submit" disabled="{{disabled}}">保存</button> </view> </form> var app = getApp(); var util = require('../../../utils/util.js'); var ck = require('../../../utils/check.js'); import { weChatUser } from '../../../utils/api.js' Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { codeText: '驗(yàn)證碼', // 按鈕文字 disabled: true, // codeDisabled: true, currentTime: 60, account: '', // 注冊(cè)-賬號(hào) password: '', // 注冊(cè)-密碼 verification: '', // 驗(yàn)證碼 }, // 修改手機(jī)號(hào) formPhone: util.throttle((e) => { let that = this, password = e.detail.value.password, account = e.detail.value.account, verification = e.detail.value.verification; // 判斷手機(jī)號(hào)密碼 if (!ck.checkPhone(account) || !ck.checkNull(password, '密碼') || !ck.checkNull(verification, '密碼')) { return } // 手機(jī)號(hào)密碼驗(yàn)證通過(guò)后,發(fā)請(qǐng)求修改密碼 let data = { "password": password, "phone": account, "verificationCode": Number(verification) } let result = weChatUser.updatePhoneBinding(data) result.then((res) => { if (res) { wx.showToast({ title: '修改賬號(hào)成功', mask: true }) setTimeout(() => { wx.navigateBack({ delta: 1 }) }, 2000) } }) // 成功后,返回上一頁(yè) }, 1000), // 發(fā)送修改手機(jī)號(hào)的驗(yàn)證碼 sendCode: util.throttle(function (e) { let account = e.currentTarget.dataset.account; // 判斷手機(jī)號(hào)密碼 if (!ck.checkPhone(account)) { return } ck.countDown(this) var data = { phone: Number(account) } let result = weChatUser.getVerificationCode(data) result.then((res) => { if (res) { wx.showToast({ title: '發(fā)送成功', icon: 'none', mask: true }) } }) }, 1000), // 監(jiān)聽(tīng) 輸入(控制按鈕樣式變化) inputWacth: function (e) { let item = e.currentTarget.dataset.model; this.setData({ [item]: e.detail.value }); let len = this.data.password.length; if (this.data.account && this.data.account.length === 11) { this.setData({ codeDisabled: false }) if (len >= 6 && this.data.verification) { this.setData({ disabled: false }) } else { this.setData({ disabled: true }) } } }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { wx.setNavigationBarTitle({ title: options.title, }) } }) // check.js function checkPhone(phone) { // 判斷手機(jī)號(hào) if (!phone) { wx.showToast({ title: '請(qǐng)輸入手機(jī)號(hào)', icon: 'none', duration: 2000 }) return false } if (phone.length < 11) { wx.showToast({ title: '手機(jī)號(hào)有誤,請(qǐng)重新輸入', icon: 'none', duration: 2000 }) return false } if (!(/^1[3456789]\d{9}$/.test(phone))) { wx.showToast({ title: '手機(jī)號(hào)有誤,請(qǐng)重新輸入', icon: 'none', duration: 2000 }) return false } return true } function checkNull(val, msg) { if (!val) { wx.showToast({ title: `請(qǐng)?zhí)顚?xiě)${msg}!`, icon: 'none' }) return false } return true } function countDown(self) { let currentTime = self.data.currentTime; self.setData({ codeText: currentTime + 's' }) let interval = setInterval(function () { self.setData({ codeText: (currentTime - 1) + 's' }) currentTime--; if (currentTime <= 0) { clearInterval(interval) self.setData({ codeText: '重新獲取', currentTime: 60 }) } }, 1000) } module.exports = { checkPhone, checkNull, countDown } // util.js // 防止多次重復(fù)點(diǎn)擊(函數(shù)節(jié)流) function throttle(fn, gapTime) { if (!gapTime) { gapTime = 1000; } let _lastTime = null; // 返回新函數(shù) return function(e) { let _nowTime = +new Date(); if (_nowTime - _lastTime > gapTime || !_lastTime) { // fn(this, e); // 改變this和e fn.apply(this, arguments) _lastTime = _nowTime; } } } module.exports = { throttle }
總結(jié)
以上所述是小編給大家介紹的微信小程序批量監(jiān)聽(tīng)輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))
- 微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼
- 微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
- 微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
- 微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開(kāi)發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
學(xué)習(xí)掌握J(rèn)avaScript中this的使用技巧
這篇文章主要幫助大家學(xué)習(xí)并熟練掌握J(rèn)avaScript中this的使用技巧,感興趣的小伙伴們可以參考一下2016-08-08詳解js跨域請(qǐng)求的兩種方式,支持post請(qǐng)求
原先一直以為要實(shí)現(xiàn)跨域請(qǐng)求只能用jsonp,只能支持GET請(qǐng)求,后來(lái)了解到使用POST請(qǐng)求也可以實(shí)現(xiàn)跨域,但是需要在服務(wù)器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers頭,下面說(shuō)明下兩個(gè)不同的方法實(shí)現(xiàn)的方式和原理。2018-05-05JavaScript中常見(jiàn)的八個(gè)陷阱總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中八個(gè)常見(jiàn)的陷阱,這些陷阱雖然針對(duì)Javascript初學(xué)者,但是磚家們你們也可以看一看,避免入了這些坑,感興趣的朋友們下面來(lái)一起看看吧。2017-06-06