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


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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript 验证日期的函数
Mar 18 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
javascript中的delete使用详解
Apr 11 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
js实现自定义右键菜单
May 18 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP实现的购物车类实例
2015/06/17 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python读写配置文件操作示例
2019/07/03 Python
Python的log日志功能及设置方法
2019/07/11 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
质量承诺书格式范文
2015/04/28 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
中学总务处工作总结
2015/08/12 职场文书
初中班主任工作随笔
2015/08/15 职场文书