Detailed explanation of WeChat applet input input examples

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

Implementation of WeChat applet input input and dynamic setting button

[Requirement] When the mobile phone number has been filled in and the agreement has been checked, the "immediately" The "Login" button becomes bright and can be clicked; if any of the buttons are not satisfied, the button is grayed out and cannot be clicked; the SMS verification code is obtained, and the countdown prompts the operation; a toast pop-up window prompts the 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
      });
    }

  },

})

Related recommendations:

vue Get Detailed explanation of input input value

javascript input input box fuzzy prompt function detailed explanation

Detailed explanation of WeChat development input input box

The above is the detailed content of Detailed explanation of WeChat applet input input examples. For more information, please follow other related articles on the PHP Chinese website!