自助点餐小程序_微信小程序批量监听输入框对按

日期:2021-01-07 类型:行业动态 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

微信小程序批量监听输入框对按钮样式进行控制的实现代码       这篇文章主要介绍了小程序批量监听输入框对按钮样式进行控制的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
 input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" /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 
 view 
 view 密码 /view 
 input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type="password" maxlength="12" /input 
 /view 
 view 
 view 新手机 /view 
 input placeholder="请输入新手机号" name="account" value="{{account}}" data-model="account" bindinput="inputWacth" maxlength="11" type="number" /input 
 button catchtap="sendCode" data-account="{{account}}" disabled="{{codeDisabled}}" {{codeText}} /button 
 /view 
 view 
 view 验证码 /view 
 input placeholder="请输入验证码" name="verification" data-model="verification" bindinput="inputWacth" maxlength="6" /input 
 /view 
 /view 
 view 
 button 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
}

总结

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


上一篇:外卖商家开发小程序_使用React 返回下一篇:没有了