Implementation of input input and dynamic setting buttons in WeChat applet

This article mainly introduces the relevant information about the input input and dynamic setting buttons of the WeChat applet. I hope this article can help everyone. Friends in need can refer to

WeChat applet Implementation of input input and dynamic setting buttons

[Requirement] When the mobile phone number has been filled in and the agreement has been checked, the "Log in now" button will light up and the button can be clicked; if any of them is not satisfied , the button is grayed out and cannot be clicked; it enables obtaining SMS verification codes and countdown prompts; and toast pop-up prompts for content that does not meet the requirements.

<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?&#39;active&#39;:&#39;&#39;}}" 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(&#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
      });
    }

  },

})

The above is the entire content of this article, I hope it will be helpful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Example of WeChat mini program scroll-view to implement pull-up loading and pull-down refresh

##WeChat mini program The program realizes the method of dynamically setting the placeholder prompt text and button selection/cancel status

WeChat applet realizes the position function of clicking the button to move the view label

The above is the detailed content of Implementation of input input and dynamic setting buttons in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!