微信小程序 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="/UploadFiles/2021-04-02/{{imgCodeSrc}}">
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) "zdx-weixin" + Math.random();
this.setData({
imgCodeSrc: "http://prezdx.geinihua.com/invite/WeChat/verify" + 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
});
}
},
})
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“微信小程序 input输入及动态设置按钮的实现”评论...
更新日志
2025年10月24日
2025年10月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]