微信小程序中input输入及动态设置按钮的实现

微信小程序 input输入及动态设置按钮的实现

【需求】实现当手机号已填写和协议已勾选时，“立即登录”按钮变亮，按钮可点击；若有一个不满足，按钮置灰，不可点击；实现获取短信验证码，倒计时提示操作；对不满足要求内容进行toast弹窗提示。

  
  
    手机号
    
  
  
  
    
      图形验证码
      
    

    
  
  
  
    
      验证码
      
    

    {{captchaText}}
  

  
    
     
    
    已阅读并同意 《用户使用协议》
  
  立即登录

    

    


  
    {{toastText}}
  

js

// 获取全局应用程序实例对象
const app = getApp()

Page({
  data: {
    //toast默认不显示
    isShowToast: false,
    mobile: &＃39;&＃39;,
    imgCode: &＃39;&＃39;,
    code: &＃39;&＃39;,
    // inviteCode: &＃39;&＃39;,
    errorContent: &＃39;请输入手机号&＃39;,
    timer: 60,
    captchaText: &＃39;获取验证码&＃39;,
    captchaSended: false,
    isReadOnly: false,
    capKey: &＃39;&＃39;,
    sendRegist: false,
    imgCodeSrc: &＃39;&＃39;,
    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(&＃39;请输入手机号&＃39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&＃39;请输入正确手机号&＃39;);
    }
    else if (that.imgCode.length != 4) {
      this.showToast(&＃39;请输入正确图片验证码&＃39;);
    }
    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 = &＃39;获取验证码&＃39;;
              this.setData({
                timer: 60,
                captchaText: &＃39;获取验证码&＃39;,
                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: &＃39;../userXieyi/userXieyi&＃39;
    })

  },
  // 注册
  regist() {
    var that = this.data;
    if(!that.checkAgree||!that.phoneAll){
      return
    }
    // sessionCheck为1，目的是防止微信code码先于session过期
    var code = wx.getStorageSync(&＃39;wxCode&＃39;);
    var sessiOnCheck= wx.getStorageSync(&＃39;sessionCheck&＃39;);

    wx.setStorageSync(&＃39;mobile&＃39;,that.mobile);

    if (!that.mobile) {
      this.showToast(&＃39;请输入手机号&＃39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&＃39;请输入正确手机号&＃39;);
    } else if (that.code.length != 6) {
      this.showToast(&＃39;请输入正确验证码&＃39;);
    } else {
      wx.showLoading({
        title: &＃39;加载中...&＃39;,
      });
      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(&＃39;token&＃39;, res.businessObj.token);
          wx.setStorageSync(&＃39;userId&＃39;,res.businessObj.userId);
          this.sucessCb(res);
          app.globalData.isLogin = true; //设置为登录成功
        } else {
          this.showToast(res.message);
        }
      });
    }
  },
  // 成功回调
  sucessCb(res) {
    wx.redirectTo({
      url: &＃39;/pages/index/index&＃39;
    })
  },
  onLoad: function () {
    this.getImgCode();
    var that=this;
    if(wx.getStorageSync(&＃39;mobile&＃39;)){
      that.setData({
        mobile: wx.getStorageSync(&＃39;mobile&＃39;),
      })
    }
    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }

  },

})

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！