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

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

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

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

手机号

bindinput="mobileInput"/>

图形验证码

bindinput="imgCaptchaInput"/>

验证码

bindinput="smsCaptchaInput"/>

{{captchaText}}

已阅读并同意 《用户使用协议》

立即登录

{{toastText}}

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

});

}

},

})

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。