这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
微信小程序 input输入及动态设置按钮的实现
【需求】实现当手机号已填写和协议已勾选时，“立即登录”按钮变亮，按钮可点击；若有一个不满足，按钮置灰，不可点击；实现获取短信验证码，倒计时提示操作；对不满足要求内容进行toast弹窗提示。
<view>
<!--手机号-->
<view>
<text>手机号</text>
<input>
</view>
<!--图片验证码-->
<view>
<view>
<text>图形验证码</text>
<input>
</view>
<image></image>
</view>
<!--短信验证码-->
<view>
<view>
<text>验证码</text>
<input>
</view>
<view>{{captchaText}}</view>
</view>
<view>
<checkbox-group>
<checkbox></checkbox>
</checkbox-group>
<span>已阅读并同意</span> <text>《用户使用协议》</text>
</view>
<view>立即登录</view></view>
<!--mask-->
<view></view>
<!--以下为toast显示的内容-->
<view><view>
<view>
{{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 {
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中文网！
相关推荐：
以上就是微信小程序中input输入及动态设置按钮的实现的详细内容，更多请关注GTHOST其它相关文章！
