小程序验证码倒计时

2024-02-01 分类：网站建设

现在好多小程序都没有用到手机号的登录，因为可以直接调用微信的接口，getPhoneNumber，因为我们为了保持公众号，小程序，app后台的一致性，，又做了手机号的登录。

问题：

简单描述一下功能：输入手机号，点击获取验证码。我必须在点击那个获取验证按钮之前，在js中获取手机号。
如何获取到input提交之前的输入值呢？

3.小程序的收取短信的倒计时方法？

解决方法：

微信对input的组件，提供了多个事件，看来只能通过这些事件去实现单个input的值的获取。bindblur ，失去焦点事件，e.detail.value取的这个对象的值

js代码：

//page中添加属性（事件）
mobileInputEvent:function(e){
this.setData({
mobile:e.detail.value
})
},
verifyCodeEvent:function(e){
if(this.data.buttonDisable) return false;
var that = this;
var c = 60;
var intervalId = setInterval(function(){
c = c-1;
that.setData({
verifyCodeTime:c + 's后重发',
buttonDisable:true
})
if(c==0){
clearInterval(intervalId);
that.setData({
verifyCodeTime:'获取验证码',
buttonDisable:false
})
}
},1000)
var mobile = this.data.mobile;
var regMobile = /^1d{10}$/;
if(!regMobile.test(mobile)){
wx.showToast({
title:'手机号有误！'
})
return false;
}
app.sendVerifyCode(function(){},mobile);//获取短信验证码接口
}
代码解释：mobileInputEvent代表输入的手机号码

verifyCodeEvent代表点击验证码倒计时方法

wxml代码：

 <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}" >  <view class="drawer_title">登录</view> <view class="drawer_content"> <view class="top grid"> <label class="title col-0">手机号码</label> <input class="input_base input_h30 col-1" placeholder="请输入手机号码" value="" bindblur="mobileInputEvent" ></input> </view> <view class="top grid"> <label class="title col-0">验证码</label> <input class="input_base input_h30 col-1 code" placeholder="验证码" value="" bindblur='codeInputEvent'></input> <view class="btn_code" bindtap="getCode" disabled="{{buttonDisable}}" >{{verifyCodeTime}}</view> </view> </view> <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> <view class="btn_concel" bindtap="concel" >取消</view> </view>
wxss代码:

/**弹出框**/ .btn {
width: 80%;
padding: 20rpx 0;
border-radius: 10rpx;
text-align: center;
margin: 40rpx 10%;
background: #000;
color: #fff;
}

/*mask*/ .drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}

/*content*/ .drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 1001;
background: #FAFAFA;
margin: -150px 50rpx 0 50rpx;
border-radius: 3px;
}

.drawer_title{
padding:15px;
font: 20px "microsoft yahei";
text-align: center;
}
.drawer_content {
height: 210px;
overflow-y: scroll; /*超出父盒子高度可滚动*/
}

.btn_ok{
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #E8E8EA;
color: #3CC51F;
float: right;
}
.btn_concel{
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #E8E8EA;
color: #3CC51F;
float: left;
}
.top{
padding-top:8px;
}
.bottom {
padding-bottom:8px;
}
.title {
height: 30px;
line-height: 30px;
width: 160rpx;
text-align: center;
display: inline-block;
font: 300 28rpx/30px "microsoft yahei";
}

.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 100rpx;
}
.input_h30{
height: 30px;
line-height: 30px;
}
.btn_code{
background-color: gray;
width: 180rpx;
color: white;
margin-left: 20rpx;
font-size: 25rpx;
line-height: 60rpx;
text-align: center;
}
.input_view{
font: 12px "microsoft yahei";
background: #fff;
color:#000;
line-height: 30px;
}
input {
font: 12px "microsoft yahei";
background: #fff;
color:#000 ;
}
radio{
margin-right: 20px;
}
.grid { display: -webkit-box; display: box; }
.col-0 {-webkit-box-flex:0;box-flex:0;}
.col-1 {-webkit-box-flex:1;box-flex:1;}
.fl { float: left;}

.fr { float: right;}

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

网页名称：小程序验证码倒计时
文章起源：https://www.cdcxhl.com/news19/316469.html

成都网站建设公司_创新互联，为您提供ChatGPT、服务器托管、定制网站、电子商务、外贸建站、营销型网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容