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

这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下

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

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

<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);},// 双向绑定mobilemobileInput(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输入及动态设置按钮的实现的详细内容，更多请关注小潘博客其它相关文章！