当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-11-02 18:02

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