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


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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Vue中computed与methods的区别详解
Mar 24 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
Dedecms常用函数解析
2008/02/01 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python模拟事件触发机制详解
2018/01/19 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
母亲80寿诞答谢词
2014/01/16 职场文书
捐资助学倡议书
2014/04/15 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
python数字图像处理之图像的批量处理
2022/06/28 Python