微信小程序 input輸入及動態設置按鈕的實現

【需求】實現當手機號已填寫和協議已勾選時，“立即登錄”按鈕變亮，按鈕可點擊；若有一個不滿足，按鈕置灰，不可點擊；實現獲取短信驗證碼，倒計時提示操作；對不滿足要求內容進行toast彈窗提示。

<view class="container">  <!--手機號-->  <view class="section">    <text class="txt">手機號</text>    <input value="{{mobile}}" placeholder-class="placeholder" placeholder="11位手機號碼" type="number" maxlength="11"        bindinput="mobileInput"/>  </view>  <!--圖片驗證碼-->  <view class="section">    <view>      <text class="txt">圖形驗證碼</text>      <input placeholder-class="placeholder" placeholder="輸入圖形驗證碼" type="text" maxlength="4"          bindinput="imgCaptchaInput"/>    </view>    <image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"></image>  </view>  <!--短信驗證碼-->  <view class="section">    <view>      <text class="txt">驗證碼</text>      <input placeholder-class="placeholder" placeholder="輸入驗證碼" 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">《用戶使用協議》</text>  </view>  <view class="regist {{phoneAll&&checkAgree?'active':''}}" bindtap="regist">立即登錄</view></view>    <!--mask--><view class="toast_mask" wx:if="{{isShowToast}}"></view>    <!--以下為toast顯示的內容--><view class="toast_content_box" wx:if="{{isShowToast}}"><view class="toast_content">  <view class="toast_content_text">    {{toastText}}  </view></view></view>

js

// 獲取全局應用程序實例對象const app = getApp()Page({  data: {    //toast默認不顯示    isShowToast: false,    mobile: '',    imgCode: '',    code: '',    // inviteCode: '',    errorContent: '請輸入手機號',    timer: 60,    captchaText: '獲取驗證碼',    captchaSended: false,    isReadOnly: false,    capKey: '',    sendRegist: false,    imgCodeSrc: '',    phoneAll: false,    checkAgree:true,    checkboxValue:[1],  },  // 顯示彈窗  showToast(txt, duration = 1500) {    //設置toast時間，toast內容    this.setData({      count: duration,      toastText: txt    });    var _this = this;    // toast時間    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;    // 顯示toast    _this.setData({      isShowToast: true,    });    // 定時器關閉    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驗證碼  imgCaptchaInput(e) {    this.setData({      imgCode: e.detail.value    });  },  // 雙向綁定sms驗證碼  smsCaptchaInput(e) {    this.setData({      code: e.detail.value    });  },  // 同意協議  checkboxChange(e) {    this.data.checkboxValue = e.detail.value;    if(this.data.checkboxValue[0]==1){      this.setData({        checkAgree: true      });    }else {      this.setData({        checkAgree: false      });    }  },  // 獲取短信驗證碼  getSMS() {    var that = this.data;    if (!that.mobile) {      this.showToast('請輸入手機號');    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {      this.showToast('請輸入正確手機號');    }    else if (that.imgCode.length != 4) {      this.showToast('請輸入正確圖片驗證碼');    }    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 = '獲取驗證碼';              this.setData({                timer: 60,                captchaText: '獲取驗證碼',                captchaSended: false              })            }          }, 1000);        }      });    }  },  // 獲取圖形碼  getImgCode() {    var capKey = "zdx-weixin" + Math.random();    this.setData({      imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify?capKey=" + capKey,      capKey: capKey    });  },  //用戶使用協議  xieyi() {    wx.navigateTo({      url: '../userXieyi/userXieyi'    })  },  // 注冊  regist() {    var that = this.data;    if(!that.checkAgree||!that.phoneAll){      return    }    // sessionCheck為1，目的是防止微信code碼先于session過期    var code = wx.getStorageSync('wxCode');    var sessionCheck = wx.getStorageSync('sessionCheck');    wx.setStorageSync('mobile',that.mobile);    if (!that.mobile) {      this.showToast('請輸入手機號');    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {      this.showToast('請輸入正確手機號');    } else if (that.code.length != 6) {      this.showToast('請輸入正確驗證碼');    } 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) {          //注冊成功          wx.setStorageSync('token', res.businessObj.token);          wx.setStorageSync('userId',res.businessObj.userId);          this.sucessCb(res);          app.globalData.isLogin = true; //設置為登錄成功        } else {          this.showToast(res.message);        }      });    }  },  // 成功回調  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      });    }  },})