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


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 白痴级入门教程
Nov 11 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
基于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
php MySQL与分页效率
2008/06/04 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python流程控制语句的深入讲解
2020/06/15 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
华清池导游词
2015/02/02 职场文书
爱国主题班会教案
2015/08/14 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Python中字符串对象语法分享
2022/02/24 Python
python使用torch随机初始化参数
2022/03/22 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL