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

时间: 2019-09-04阅读: 585标签: 输入框

 在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
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

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

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

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

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

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

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

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

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

js模拟实现输入框input事件

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

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

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

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

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广