微信小程序批量监听输入框对按钮样式进行控制的实现代码


Posted in Javascript onOctober 12, 2019

在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
}

总结

以上所述是小编给大家介绍的微信小程序批量监听输入框对按钮样式进行控制的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 #Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 #Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 #Javascript
微信小程序 导入图标实现过程详解
Oct 11 #Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 #Javascript
vue实现点击按钮下载文件功能
Oct 11 #Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python打印“菱形”星号代码方法
2018/02/05 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
《假如》教学反思
2014/04/17 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS