本文主要介绍了微信小程序 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
});
}
},
})
相关推荐：
vue获取input输入值详解
javascript input输入框模糊提示功能详解
详解微信开发input输入框
以上就是微信小程序input输入实例详解的详细内容。