微信小程序 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
 });
 }

 },

})

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