小程序批量监听输入框，对按钮样式进行控制

 在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
}