微信小程序批量监听输入框对按钮样式进行控制的实现代码
在input组件上绑定data-model="xxx" bindinput="inputWatch",
监听输入框输入:
创新互联建站于2013年成立,是专业互联网技术服务公司,拥有项目成都网站制作、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元临沧做网站,已为上家服务,为临沧各地企业和个人服务,联系电话:028-86922220
inputWacth: function (e) { let item = e.currentTarget.dataset.model; this.setData({ [item]: e.detail.value }); }
当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位),保存按钮变为可点状态。
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
}
总结
以上所述是小编给大家介绍的微信小程序批量监听输入框对按钮样式进行控制的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
当前文章:微信小程序批量监听输入框对按钮样式进行控制的实现代码
文章URL:http://myzitong.com/article/jdohsh.html