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

更新日期: 2019-09-04阅读: 2.3k标签: 输入框

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

链接: https://www.fly63.com/article/detial/5638

通过js实现:input 限制输入数字和小数点

我们可以使用html5的type=number来限制input只能输入数字类型,但是会存在一定的兼容问题,而且在浏览器样式上会出现上下箭头的标示,显然这不是我们需要的,这篇文章就整理关于使用js来限制input的输入类型为数字和小数点的实现。

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?

textarea换行_在textarea中如何换行的实现总汇

html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?利用pre、替换 br 标签、直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre

纯css实现输入框placeholder动效及输入校验

话不多说,我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:

vue实现输入框的模糊查询(节流函数的应用场景)

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析

js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.简单的调用:

如何清除input输入框历史下拉数据

当之前的input框输入了数据后,下次输入有历史记录。我们发现无论是清除cookie,还是删除浏览器历史记录,都没办法清空input下拉的历史记录信息。那么该如何解决该问题呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!