【需求】实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击;若有一个不满足,按钮置灰,不可点击;实现获取短信验证码,倒计时提示操作;对不满足要求内容进行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
});
} }, })

小程序根据input输入,动态设置按钮的样式的更多相关文章

  1. 微信小程序中input标签高度设置

    如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...

  2. 微信小程序:input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

  3. python学习笔记(2)——练习小程序之 " input " 隐藏陷阱

    练习小程序之 ----------" input " 隐藏陷阱 age=input('please enter your age:') if age>=18: print(' ...

  4. 【小程序】---- input获得焦点时placeholder重影BUG

    问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...

  5. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  6. Vue.之. 动态设置按钮Disabled

    Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性      :disabled="isAble"  ,控制:更新按钮.重置按钮 <el-form- ...

  7. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  8. 小程序中input设置宽度后宽度还有空间,但是placeholder被遮挡问题

    最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <inp ...

  9. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

随机推荐

  1. Sql Server 表间对应关系

    <1>.关联映射:一对多/多对一 存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多:从球队角度来说一个球队拥有多个球员 即为一对多多对一:从球员角度来说多个球员属于一个球队 即为 ...

  2. 【Consul】Consul架构-Gossip协议

    Consul使用gossip协议管理成员关系.广播消息到整个集群.详情可参考Serf library,Serf使用到的gossip协议可以参阅"SWIM: Scalable Weakly-c ...

  3. laravel读excel

    fileName = "test.xls";$filePath = "../storage/app/";Excel::load($filePath.$fileN ...

  4. 2.Linux文件和目录

    1. 目录和路径 linux下比较特殊的目录: . 代表此层目录 .. 代表上一层目录 - 代表前一个工作目录 ~ 代表『目前使用者身份』所在的home目录 ~account 代表 account 这 ...

  5. 第二十二篇 正在表达式 re模块

    re模块****** 就本质而言,正则表达式时一种小型的,高度专业化的编程语言,在python里,它内嵌在python中,并通过re模块实现.正则表达式模式被编译成一系列的字节码.然后用C编写的匹配引 ...

  6. (转)简述47种Shader Map的渲染原理与制作方法

    在Shader中会使用各种不同图参与渲染,所以简单地总结下各种图的渲染原理.制作方法,最后面几种是程序生成图. 1. Albedo 2. Diffuse(Photographic) 从上图可以看出来, ...

  7. ZooKeeper的伪分布式集群搭建

    ZooKeeper集群的一些基本概念 zookeeper集群搭建: zk集群,主从节点,心跳机制(选举模式) 配置数据文件 myid 1/2/3 对应 server.1/2/3 通过 zkCli.sh ...

  8. 洛谷P2346四子连棋

    题目描述 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步. 黑白双方交替走棋,任意一方可 ...

  9. LeetCode - 20. Valid Parentheses(0ms)

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  10. SPFA模板 Bellmanford优化版

    SPFA模板: queue<int>Q; ]; ],sumv[]; *],__next[*],e,w[*],first[],cnts[]; void AddEdge(int U,int V ...