微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼
在input組件上綁定data-model="xxx" bindinput="inputWatch",監(jiān)聽輸入框輸入:
<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)證通過后,發(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)聽 輸入(控制按鈕樣式變化)
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)聽頁(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í)顚?{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)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(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)畫效果的實(shí)現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
詳解js根據(jù)百度地圖提供經(jīng)緯度計(jì)算兩點(diǎn)距離
這篇文章主要介紹了js根據(jù)百度地圖提供經(jīng)緯度計(jì)算兩點(diǎn)距離,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)...2007-08-08
動(dòng)態(tài)加載css方法實(shí)現(xiàn)和深入解析
本文主要介紹了動(dòng)態(tài)加載css的方法實(shí)現(xiàn)和深入解析。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
微信小程序中this.data與this.setData的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于微信小程序中this.data與this.setData區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧2018-09-09
設(shè)置checkbox為只讀(readOnly)的兩種方式
設(shè)置checkbox為只讀的方法有很多,在本文為大家詳細(xì)介紹下兩種比較實(shí)用的方法,感興趣的朋友不要錯(cuò)過2013-10-10

