這篇文章給大家分享的是有關(guān)微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì),成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為超過(guò)千家服務(wù),創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)將一如既往的為我們的客戶(hù)提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣服務(wù)!

微信小程序 input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)

【需求】實(shí)現(xiàn)當(dāng)手機(jī)號(hào)已填寫(xiě)和協(xié)議已勾選時(shí)，“立即登錄”按鈕變亮，按鈕可點(diǎn)擊；若有一個(gè)不滿(mǎn)足，按鈕置灰，不可點(diǎn)擊；實(shí)現(xiàn)獲取短信驗(yàn)證碼，倒計(jì)時(shí)提示操作；對(duì)不滿(mǎn)足要求內(nèi)容進(jìn)行toast彈窗提示。

<view class="container">
  <!--手機(jī)號(hào)-->
  <view class="section">
    <text class="txt">手機(jī)號(hào)</text>
    <input value="{{mobile}}" placeholder-class="placeholder" placeholder="11位手機(jī)號(hào)碼" type="number" maxlength="11"
        bindinput="mobileInput"/>
  </view>
  <!--圖片驗(yàn)證碼-->
  <view class="section">
    <view>
      <text class="txt">圖形驗(yàn)證碼</text>
      <input placeholder-class="placeholder" placeholder="輸入圖形驗(yàn)證碼" type="text" maxlength="4"
          bindinput="imgCaptchaInput"/>
    </view>

    <image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>
  </view>
  <!--短信驗(yàn)證碼-->
  <view class="section">
    <view>
      <text class="txt">驗(yàn)證碼</text>
      <input placeholder-class="placeholder" placeholder="輸入驗(yàn)證碼" type="number" maxlength="6"
          bindinput="smsCaptchaInput"/>
    </view>

    <view class="smsBtn" bindtap="getSMS">{{captchaText}}</view>
  </view>

  <view class="agree" style="margin-top:40rpx">
    <checkbox-group bindchange="checkboxChange">
     <checkbox class="check" value="1" checked="true" bindchange="checkboxChange"></checkbox>
    </checkbox-group>
    <span>已閱讀并同意</span> <text style="color:#98c7ff" bindtap="xieyi">《用戶(hù)使用協(xié)議》</text>
  </view>
  <view class="regist {{phoneAll&&checkAgree?'active':''}}" bindtap="regist">立即登錄</view>
</view>
    <!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
    <!--以下為toast顯示的內(nèi)容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
<view class="toast_content">
  <view class="toast_content_text">
    {{toastText}}
  </view>
</view>
</view>

js

// 獲取全局應(yīng)用程序?qū)嵗龑?duì)象
const app = getApp()

Page({
  data: {
    //toast默認(rèn)不顯示
    isShowToast: false,
    mobile: '',
    imgCode: '',
    code: '',
    // inviteCode: '',
    errorContent: '請(qǐng)輸入手機(jī)號(hào)',
    timer: 60,
    captchaText: '獲取驗(yàn)證碼',
    captchaSended: false,
    isReadOnly: false,
    capKey: '',
    sendRegist: false,
    imgCodeSrc: '',
    phoneAll: false,
    checkAgree:true,
    checkboxValue:[1],
  },
  // 顯示彈窗
  showToast(txt, duration = 1500) {
    //設(shè)置toast時(shí)間，toast內(nèi)容
    this.setData({
      count: duration,
      toastText: txt
    });
    var _this = this;
    // toast時(shí)間
    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
    // 顯示toast
    _this.setData({
      isShowToast: true,
    });
    // 定時(shí)器關(guān)閉
    setTimeout(function () {
      _this.setData({
        isShowToast: false
      });
    }, _this.data.count);
  },
  // 雙向綁定mobile
  mobileInput(e) {
    this.setData({
      mobile: e.detail.value
    });

    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }else if(this.data.mobile.length<11){
      this.setData({
        phoneAll: false
      });
    }
  },
  // 雙向綁定img驗(yàn)證碼
  imgCaptchaInput(e) {
    this.setData({
      imgCode: e.detail.value
    });
  },
  // 雙向綁定sms驗(yàn)證碼
  smsCaptchaInput(e) {
    this.setData({
      code: e.detail.value
    });
  },
  // 同意協(xié)議
  checkboxChange(e) {
    this.data.checkboxValue = e.detail.value;
    if(this.data.checkboxValue[0]==1){
      this.setData({
        checkAgree: true
      });
    }else {
      this.setData({
        checkAgree: false
      });
    }
  },
  // 獲取短信驗(yàn)證碼
  getSMS() {
    var that = this.data;

    if (!that.mobile) {
      this.showToast('請(qǐng)輸入手機(jī)號(hào)');
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast('請(qǐng)輸入正確手機(jī)號(hào)');
    }
    else if (that.imgCode.length != 4) {
      this.showToast('請(qǐng)輸入正確圖片驗(yàn)證碼');
    }
    else {
      if (that.captchaSended) return;
        this.setData({
          captchaSended: true
        })
      app.api.getSMSByMobileAndCaptcha({
        mobile: that.mobile,
        capKey: that.capKey,
        code: that.imgCode,
        type:1
      
      }).then((result) => {
        this.showToast(result.message);
        if (result.code != 1) {
          this.getImgCode();
          this.setData({
            captchaSended: false,
          });
        } else {
          var counter = setInterval(() => {
            that.timer--;
            this.setData({
              timer: that.timer,
              captchaText: `${that.timer}秒`,
              isReadOnly: true
            });
            if (that.timer === 0) {
              clearInterval(counter);
              that.captchaSended = false;
              that.captchaText = '獲取驗(yàn)證碼';
              this.setData({
                timer: 60,
                captchaText: '獲取驗(yàn)證碼',
                captchaSended: false
              })
            }
          }, 1000);
        }
      });
    }
  },
  // 獲取圖形碼
  getImgCode() {
    var capKey = "zdx-weixin" + Math.random();
    this.setData({
      imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey,
      capKey: capKey
    });
  },
  //用戶(hù)使用協(xié)議
  xieyi() {
    wx.navigateTo({
      url: '../userXieyi/userXieyi'
    })

  },
  // 注冊(cè)
  regist() {
    var that = this.data;
    if(!that.checkAgree||!that.phoneAll){
      return
    }
    // sessionCheck為1，目的是防止微信code碼先于session過(guò)期
    var code = wx.getStorageSync('wxCode');
    var sessionCheck = wx.getStorageSync('sessionCheck');

    wx.setStorageSync('mobile',that.mobile);

    if (!that.mobile) {
      this.showToast('請(qǐng)輸入手機(jī)號(hào)');
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast('請(qǐng)輸入正確手機(jī)號(hào)');
    } else if (that.code.length != 6) {
      this.showToast('請(qǐng)輸入正確驗(yàn)證碼');
    } else {
      wx.showLoading({
        title: '加載中...',
      });
      app.api.loginByCaptcha({
        mobile: that.mobile,
        smsCode: that.code,
        code: code,
        sessionCheck:sessionCheck,
      }).then((res) => {
        wx.hideLoading();
        if (res.code == 2||res.code==1) {
          //注冊(cè)成功
          wx.setStorageSync('token', res.businessObj.token);
          wx.setStorageSync('userId',res.businessObj.userId);
          this.sucessCb(res);
          app.globalData.isLogin = true; //設(shè)置為登錄成功
        } else {
          this.showToast(res.message);
        }
      });
    }
  },
  // 成功回調(diào)
  sucessCb(res) {
    wx.redirectTo({
      url: '/pages/index/index'
    })
  },
  onLoad: function () {
    this.getImgCode();
    var that=this;
    if(wx.getStorageSync('mobile')){
      that.setData({
        mobile: wx.getStorageSync('mobile'),
      })
    }
    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }

  },

})

感謝各位的閱讀！關(guān)于“微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章名稱(chēng)：微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://aaarwkj.com/article0/gdgoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、面包屑導(dǎo)航、網(wǎng)站收錄、做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)