获取验证码的页面及其实现逻辑

使用uniapp做的h5页面，所以布局使用的view标签。

1、写html布局，输入框、获取验证码按钮

<view class="input"><image src="../../static/images/login/password_icon.png" mode="scaleToFill"></image><input type="text" v-model="code" value="code" placeholder="请输入验证码" /><view @click="getCode" class="time" >{{leftTime == 120?'获取验证码': leftTime+' s'}}</view>
</view>

2、逻辑实现

data() {return {leftTime:120,       // 剩余时间timer:null,         // 计时器};
},//获取验证码
getCode(){if(this.leftTime != 120){return;}// 请求发送验证码接口sendRequest.post('/captcha',{phone:this.phone,imgcode:this.imgcode,key:this.key}).then(res => {if(res.code === 0){this.$tools.toast("发送成功,请耐心等待!")this.timer = setInterval(()=>{this.leftTime = this.leftTime - 1;if(this.leftTime <= 0){this.leftTime = 120;clearInterval(this.timer)}},1000);}else{this.$tools.toast(res.errormsg);}    },function (err) {this.$tools.toast(err);});
},

获取验证码的页面及其实现逻辑相关推荐

前端-uniapp开发app登录逻辑（人机验证以及手机获取验证码）
1.逻辑梳理跳转登录页面后,显示需要手机登录.填写手机号->点击获取验证码->弹出人机验证页面->拼图成功->请求后端接口给手机发验证码->获取验证码文字变成60s计时 ...
android 保存退出之前的页面_项目实战：Qt+Android模拟操作器（模拟操作app，打开，点击，输入，获取验证码等等）...
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/109313803 各位读者,知识无穷而人力有穷 ...
微信公众号申请页面获取验证码BUG
环境操作系统: 浏览器: 网络:wifi 步骤 1.注册成功后,进入微信公众号 2.选择订阅号,下面的[选择并继续],点击确认 3.选择[个人]后,会让你填写个人信息 4.填写完姓名和身份证号码后, ...
vue+vant 实现手机号获取验证码页面
vue+vant 实现手机号获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...
最完整手机号获取验证码登陆注册逻辑
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_37523448/article/ ...
输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...
登陆页面的获取验证码
getverifycode(){if(this.vaildatephone()){this.vaildtebtn();} } vaildtebtn(){let time = 60;let timer= ...
前端获取验证码的方式
web端页面js简单的逻辑代码这里我采用的是div方式并不是传统的button按钮 pointerEvents:none 阻止当前元素相关事件 // 获取验证码的点击var code = funct ...
30秒学会 —— 《获取验证码基本操作》
前期回顾懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用,及其好使的插件,开发懒人必整,就算是自己可以写,一大堆代码,真的要写吗?https://blog. ...

获取验证码的页面及其实现逻辑

获取验证码的页面及其实现逻辑相关推荐

最新文章

热门文章