欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序批量監(jiān)聽(tīng)輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼

 更新時(shí)間:2019年10月12日 10:53:54   作者:cbyRP  
這篇文章主要介紹了小程序批量監(jiān)聽(tīng)輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在input組件上綁定data-model="xxx" bindinput="inputWatch",監(jiān)聽(tīng)輸入框輸入:

<input placeholder="請(qǐng)輸入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
 });
}

當(dāng)輸入11位手機(jī)號(hào)后,驗(yàn)證碼按鈕變?yōu)榭牲c(diǎn)狀態(tài);當(dāng)3個(gè)輸入框都有值時(shí)(密碼大于等于6位,手機(jī)11位),保存按鈕變?yōu)榭牲c(diǎn)狀態(tài)。

<form bindsubmit="formPhone" wx:else>
 <view class="form-wrap">
  <view class="flex form-item">
  <view class="form-item-text">密碼</view>
  <input placeholder="請(qǐng)輸入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">新手機(jī)</view>
  <input placeholder="請(qǐng)輸入新手機(jī)號(hào)" 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">驗(yàn)證碼</view>
  <input placeholder="請(qǐng)輸入驗(yàn)證碼" 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({
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 codeText: '驗(yàn)證碼', // 按鈕文字
 disabled: true, // 
 codeDisabled: true,
 currentTime: 60,
 account: '', // 注冊(cè)-賬號(hào)
 password: '', // 注冊(cè)-密碼
 verification: '', // 驗(yàn)證碼
 },
 // 修改手機(jī)號(hào)
 formPhone: util.throttle((e) => {
 let that = this,
  password = e.detail.value.password,
  account = e.detail.value.account,
  verification = e.detail.value.verification;
 // 判斷手機(jī)號(hào)密碼
 if (!ck.checkPhone(account) || !ck.checkNull(password, '密碼') || !ck.checkNull(verification, '密碼')) {
  return
 }
 // 手機(jī)號(hào)密碼驗(yàn)證通過(guò)后,發(fā)請(qǐng)求修改密碼
 let data = {
  "password": password,
  "phone": account,
  "verificationCode": Number(verification)
 }
 let result = weChatUser.updatePhoneBinding(data)
 result.then((res) => {
  if (res) {
  wx.showToast({
   title: '修改賬號(hào)成功',
   mask: true
  })
  setTimeout(() => {
   wx.navigateBack({
   delta: 1
   })
  }, 2000)
  }
 })
 // 成功后,返回上一頁(yè)
 }, 1000),
 // 發(fā)送修改手機(jī)號(hào)的驗(yàn)證碼
 sendCode: util.throttle(function (e) {
 let account = e.currentTarget.dataset.account;
 // 判斷手機(jī)號(hào)密碼
 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: '發(fā)送成功',
   icon: 'none',
   mask: true
  })
  }
 })
 }, 1000),
 // 監(jiān)聽(tīng) 輸入(控制按鈕樣式變化)
 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
  })
  }
 }
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function (options) {
 wx.setNavigationBarTitle({
  title: options.title,
 })
 }
})
// check.js
function checkPhone(phone) {
 // 判斷手機(jī)號(hào)
 if (!phone) {
 wx.showToast({
  title: '請(qǐng)輸入手機(jī)號(hào)',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 if (phone.length < 11) {
 wx.showToast({
  title: '手機(jī)號(hào)有誤,請(qǐng)重新輸入',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 if (!(/^1[3456789]\d{9}$/.test(phone))) {
 wx.showToast({
  title: '手機(jī)號(hào)有誤,請(qǐng)重新輸入',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 return true
}
function checkNull(val, msg) {
 if (!val) {
 wx.showToast({
  title: `請(qǐng)?zhí)顚?xiě)${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
// 防止多次重復(fù)點(diǎn)擊(函數(shù)節(jié)流)
function throttle(fn, gapTime) {
 if (!gapTime) {
 gapTime = 1000;
 }
 let _lastTime = null;
 // 返回新函數(shù)
 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
}

總結(jié)

以上所述是小編給大家介紹的微信小程序批量監(jiān)聽(tīng)輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • js獲取鼠標(biāo)位置雜談附多瀏覽器兼容代碼

    js獲取鼠標(biāo)位置雜談附多瀏覽器兼容代碼

    最近在搞一個(gè)AJAX的小功能,目的是用浮動(dòng)div框顯示當(dāng)前鼠標(biāo)下控件的詳細(xì)信息,其中獲得鼠標(biāo)位置這塊害得我走了很多冤枉路,因?yàn)閴焊鶝](méi)有想到我下面提到的第二點(diǎn)的區(qū)別,所以我的頁(yè)面出來(lái)總是找不到我之前定義的那個(gè)div
    2008-11-11
  • JS數(shù)組方法join()用法實(shí)例分析

    JS數(shù)組方法join()用法實(shí)例分析

    這篇文章主要介紹了JS數(shù)組方法join()用法,結(jié)合實(shí)例形式分析了JS數(shù)組join()方法具體功能、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2020-01-01
  • 學(xué)習(xí)掌握J(rèn)avaScript中this的使用技巧

    學(xué)習(xí)掌握J(rèn)avaScript中this的使用技巧

    這篇文章主要幫助大家學(xué)習(xí)并熟練掌握J(rèn)avaScript中this的使用技巧,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 詳解js跨域請(qǐng)求的兩種方式,支持post請(qǐng)求

    詳解js跨域請(qǐng)求的兩種方式,支持post請(qǐng)求

    原先一直以為要實(shí)現(xiàn)跨域請(qǐng)求只能用jsonp,只能支持GET請(qǐng)求,后來(lái)了解到使用POST請(qǐng)求也可以實(shí)現(xiàn)跨域,但是需要在服務(wù)器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers頭,下面說(shuō)明下兩個(gè)不同的方法實(shí)現(xiàn)的方式和原理。
    2018-05-05
  • Canvas放置反彈效果隨機(jī)圖形(實(shí)例)

    Canvas放置反彈效果隨機(jī)圖形(實(shí)例)

    下面小編就為大家?guī)?lái)一篇Canvas放置反彈效果隨機(jī)圖形(實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • JavaScript下利用fso判斷文件是否存在的代碼

    JavaScript下利用fso判斷文件是否存在的代碼

    JavaScript下利用fso判斷文件是否存在的代碼,需要的朋友可以參考下,這個(gè)一般需要運(yùn)行確認(rèn)的。
    2010-12-12
  • JS forEach和map方法的用法與區(qū)別分析

    JS forEach和map方法的用法與區(qū)別分析

    這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結(jié)合實(shí)例形式分析了forEach和map方法的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-02-02
  • js 可拖動(dòng)列表實(shí)現(xiàn)代碼

    js 可拖動(dòng)列表實(shí)現(xiàn)代碼

    前天做了個(gè)樹(shù)形菜單,今天接著讓它可拖動(dòng)。非常不錯(cuò)的效果,需要的朋友可以參考下。
    2011-12-12
  • 前端中的JS使用調(diào)試技巧

    前端中的JS使用調(diào)試技巧

    掌握各種js調(diào)試技巧,在前端開(kāi)發(fā)中降低開(kāi)發(fā)成本,起到事半功倍的效果。譬如,快速定位問(wèn)題、降低故障概率、幫助分析邏輯錯(cuò)誤等等。這篇文章主要介紹了前端中的JS使用調(diào)試技巧,需要的朋友可以參考下
    2022-12-12
  • JavaScript中常見(jiàn)的八個(gè)陷阱總結(jié)

    JavaScript中常見(jiàn)的八個(gè)陷阱總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中八個(gè)常見(jiàn)的陷阱,這些陷阱雖然針對(duì)Javascript初學(xué)者,但是磚家們你們也可以看一看,避免入了這些坑,感興趣的朋友們下面來(lái)一起看看吧。
    2017-06-06

最新評(píng)論