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

微信小程序 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       });     }    },  })

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

相关推荐：

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

微信小程序实现点击按钮移动view标签的位置功能

以上就是微信小程序中input输入及动态设置按钮的实现的详细内容，更多内容请关注技术你好其它相关文章！