小程序获取手机验证码

<view class="container"><view class="phone"><view class="birthday birthday1"><text class='inputHead'>手机号</text><input class="phone_input" type="number" maxlength="11" bindinput="bindPhoneInput" placeholder='请输入手机号'/><view class="verify_code"><view bindtap="getPhoneCode">{{code1?'获取验证码':second+'秒'}}</view></view></view><view class="birthday birthday1"><text class='inputHead'>验证码</text><input class="phone_input" type="number" bindinput="bindKeyInput" placeholder='请输入短信验证码'/></view></view><button class="login" bindtap="loginIn">注册</button>
</view>

  data: {second: 60,phoneNumber: "",code1: true,verifyCode:""},bindPhoneInput(e) {this.setData({phoneNumber: e.detail.value})},bindKeyInput(e) {this.setData({verifyCode: e.detail.value})},// 获取手机验证码
getPhoneCode () {let that = this;let mobile = that.data.phoneNumber;if (!(/^1[34578]\d{9}$/.test(mobile))) {wx.showToast({title: '手机号码有误',duration: 2000,icon: 'none'});return false;}if (that.data.code1) {var second = that.data.second;wx.showToast({title: '验证码发送成功',icon: 'success',duration: 1000})that.setData({code1: false,loginStatic: true});var time = setInterval(()=> {if (second > 0) {second = second - 1;that.setData({second: second});} else {that.setData({code1: true,second: 60,})clearInterval(time);}}, 1000);}},loginIn(){console.log(this.data.phoneNumber, this.data.verifyCode)},

.container{padding:0;margin:0;position: absolute;justify-content:initial;width: 100%;height: 100%;background: #f7f7f7;
}.birthday1:after{content: "";display: block;position: absolute;width: 100%;border-bottom: 1px solid #f7f7f7;left:0;bottom: 0;
}.birthday{width: 750rpx;height: 88rpx;align-items: center;display: flex;background: #fff;box-sizing: border-box;padding:0 40rpx;font-size: 30rpx;position: relative;
}.birthday text{flex-shrink: 0;
}.birthday1 view{width: 100%;
}.phone_input{box-sizing: border-box;padding-left: 45rpx;
}.login{width: 690rpx;height: 88rpx;color: #fff;background: #00C6C2;margin-top: 50rpx;line-height:88rpx;
}
.phone{margin-top:40rpx;
}
.phone input{flex: 1;height: 88rpx;box-sizing: border-box;
}
.inputHead{width: 100rpx;text-align:center;
}.phone .birthday .verify_code{width: 160rpx;height: 88rpx;font-size: 26rpx;text-align: center;line-height: 88rpx;box-sizing: border-box;border-left: 1px solid #f7f7f7;color: #00C6C2;
}

小程序获取手机验证码相关推荐

微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序获取手机验证码
一种比较常见的功能获取手机验证码先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题直接上代码吧: <view class='changeInfo'> ...
实现微信小程序获取手机验证码（点击开始倒计时）
wxml部分: <input placeholder="请输入手机号" bindinput="phoneInput"></input> ...
uniapp 微信小程序获取图形验证码解决方案
写这篇博客的初衷是,自己陷入深坑,爬了好久,前端小白,记录一下吧.. **问题:**在登录时候,需要获取图形验证码来验证登录,接口返回的是base64,直接可以用base64来显示图片,没毛病吧,我也 ...
小程序获取手机系统基本信息
wx.getSystemInfo(Object object) 获取系统信息 Object object 属性类型必填说明 success function 否接口调用成功的回调函数 fail ...
小程序获取手机号验证码
//发送验证码public function sendCode(Request $request){$phone = $request->get('phone');if (empty($phon ...
微信小程序获取手机系统信息
使用方法有2种如下方法1 wx.getSystemInfo 异步方法 wx.getSystemInfo({success(res) {console.log(res.model)console. ...
小程序--获取手机型号
手机型号:{{mobileModel}}手机像素比:{{mobileePixelRatio}}窗口宽度:{{windowWidth}}窗口高度:{{windowHeight}}微信设置的语言:{{la ...
微信小程序获取手机分辨率高度
getPhoneInfo:function(){this.setData({phoneHeight: 750 / wx.getSystemInfoSync().windowWidth * wx.get ...

小程序获取手机验证码

小程序获取手机验证码相关推荐

最新文章

热门文章