在input组件上绑定data-model="xxx" bindinput="inputWatch",
监听输入框输入:
<input placeholder="请输入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 }); }
当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位),保存按钮变为可点状态。
<form bindsubmit="formPhone" wx:else> <view class="form-wrap"> <view class="flex form-item"> <view class="form-item-text">密码</view> <input placeholder="请输入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">新手机</view> <input placeholder="请输入新手机号" 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">验证码</view> <input placeholder="请输入验证码" 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({ /** * 页面的初始数据 */ data: { codeText: '验证码', // 按钮文字 disabled: true, // codeDisabled: true, currentTime: 60, account: '', // 注册-账号 password: '', // 注册-密码 verification: '', // 验证码 }, // 修改手机号 formPhone: util.throttle((e) => { let that = this, password = e.detail.value.password, account = e.detail.value.account, verification = e.detail.value.verification; // 判断手机号密码 if (!ck.checkPhone(account) || !ck.checkNull(password, '密码') || !ck.checkNull(verification, '密码')) { return } // 手机号密码验证通过后,发请求修改密码 let data = { "password": password, "phone": account, "verificationCode": Number(verification) } let result = weChatUser.updatePhoneBinding(data) result.then((res) => { if (res) { wx.showToast({ title: '修改账号成功', mask: true }) setTimeout(() => { wx.navigateBack({ delta: 1 }) }, 2000) } }) // 成功后,返回上一页 }, 1000), // 发送修改手机号的验证码 sendCode: util.throttle(function (e) { let account = e.currentTarget.dataset.account; // 判断手机号密码 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: '发送成功', icon: 'none', mask: true }) } }) }, 1000), // 监听 输入(控制按钮样式变化) 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 }) } } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.setNavigationBarTitle({ title: options.title, }) } }) // check.js function checkPhone(phone) { // 判断手机号 if (!phone) { wx.showToast({ title: '请输入手机号', icon: 'none', duration: 2000 }) return false } if (phone.length < 11) { wx.showToast({ title: '手机号有误,请重新输入', icon: 'none', duration: 2000 }) return false } if (!(/^1[3456789]\d{9}$/.test(phone))) { wx.showToast({ title: '手机号有误,请重新输入', icon: 'none', duration: 2000 }) return false } return true } function checkNull(val, msg) { if (!val) { wx.showToast({ title: `请填写${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 // 防止多次重复点击(函数节流) function throttle(fn, gapTime) { if (!gapTime) { gapTime = 1000; } let _lastTime = null; // 返回新函数 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 }
总结
以上所述是小编给大家介绍的微信小程序批量监听输入框对按钮样式进行控制的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE
- 小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小提琴协奏曲与普罗米修斯作品选FLAC
- 博主称本周游戏业内动荡无比:高价PS5 Pro、Xbox裁员等
- 米哈游也搞AI?米哈游AI大模型Glossa完成备案
- G胖变G瘦后:玩家担心其健康状况:如果他出事 游戏业将发生巨变
- 群星.1995-SUMMER.PASSION.REMIX【宝丽金】【WAV+CUE】
- 王栎鑫.2008-天生一对(EP)【种子音乐】【WAV+CUE】