最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

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

<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
 });
}

當(dāng)輸入11位手機(jī)號后,驗(yàn)證碼按鈕變?yōu)榭牲c(diǎn)狀態(tài);當(dāng)3個輸入框都有值時(密碼大于等于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="請輸入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="請輸入新手機(jī)號" 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="請輸入驗(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({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 codeText: '驗(yàn)證碼', // 按鈕文字
 disabled: true, // 
 codeDisabled: true,
 currentTime: 60,
 account: '', // 注冊-賬號
 password: '', // 注冊-密碼
 verification: '', // 驗(yàn)證碼
 },
 // 修改手機(jī)號
 formPhone: util.throttle((e) => {
 let that = this,
  password = e.detail.value.password,
  account = e.detail.value.account,
  verification = e.detail.value.verification;
 // 判斷手機(jī)號密碼
 if (!ck.checkPhone(account) || !ck.checkNull(password, '密碼') || !ck.checkNull(verification, '密碼')) {
  return
 }
 // 手機(jī)號密碼驗(yàn)證通過后,發(fā)請求修改密碼
 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),
 // 發(fā)送修改手機(jī)號的驗(yàn)證碼
 sendCode: util.throttle(function (e) {
 let account = e.currentTarget.dataset.account;
 // 判斷手機(jī)號密碼
 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)聽 輸入(控制按鈕樣式變化)
 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)聽頁面加載
 */
 onLoad: function (options) {
 wx.setNavigationBarTitle({
  title: options.title,
 })
 }
})
// check.js
function checkPhone(phone) {
 // 判斷手機(jī)號
 if (!phone) {
 wx.showToast({
  title: '請輸入手機(jī)號',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 if (phone.length < 11) {
 wx.showToast({
  title: '手機(jī)號有誤,請重新輸入',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 if (!(/^1[3456789]\d{9}$/.test(phone))) {
 wx.showToast({
  title: '手機(jī)號有誤,請重新輸入',
  icon: 'none',
  duration: 2000
 })
 return false
 }
 return true
}
function checkNull(val, msg) {
 if (!val) {
 wx.showToast({
  title: `請?zhí)顚?{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)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

最新評論

玛曲县| 鄂托克前旗| 客服| 建阳市| 华池县| 温泉县| 明水县| 宜良县| 吉林市| 广汉市| 邵阳县| 万年县| 普兰县| 天祝| 大荔县| 滦南县| 辽阳市| 顺昌县| 元氏县| 马尔康县| 云安县| 蛟河市| 和静县| 尉犁县| 林口县| 舒兰市| 彰武县| 虹口区| 呈贡县| 锦屏县| 和林格尔县| 会东县| 渝中区| 徐水县| 霍邱县| 西丰县| 曲阳县| 镇安县| 穆棱市| 宜兰市| 公主岭市|