输入6位数验证码的实现原理

<template><view><view class="Box"><view class="Get_the_prize"><view class="Award_name">输入验证码</view><view class="Award_input"></view></view><!-- 6位验证码第二版开始 --><view class="verification_frame"><!-- 六个显示框 --><view class="top_three"><view :class="{ inb: inputVerifications[0] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[0] }}</text><view v-if="!inputVerifications[0]" class="fours"></view></view><view :class="{ inb: inputVerifications[1] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[1] }}</text><view v-if="inputVerifications[0] && !inputVerifications[1]" class="fours"></view></view><view :class="{ inb: inputVerifications[2] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[2] }}</text><view v-if="inputVerifications[1] && !inputVerifications[2]" class="fours"></view></view><view :class="{ inb: inputVerifications[3] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[3] }}</text><view v-if="inputVerifications[2] && !inputVerifications[3]" class="fours"></view></view><view :class="{ inb: inputVerifications[4] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[4] }}</text><view v-if="inputVerifications[3] && !inputVerifications[4]" class="fours"></view></view><view :class="{ inb: inputVerifications[5] >= 0 ? true : false }" class="input"><text>{{ inputVerifications[5] }}</text><view v-if="inputVerifications[4] && !inputVerifications[5]" class="fours"></view></view></view><!-- 隐藏的input --><view class="top_four"><input type="number" class="input_show" maxlength="6" v-model="inputVerifications" @input="inputVerification" :focus="true" style="color:transparent; " /></view></view><!-- 6位验证码第二版结束 --><view class="getVerification"><!-- 输入验证码正确时提示 --><view class="Tips_box"><view class="Verification_tips" v-if="againState">验证码已发送，请注意查收</view><view class="error_tips" v-else>验证码不正确</view><view class="Verification_tips"><view class="Resend_box" v-if="resendStatus" style="font-weight: 600; color: #333333;" @click="ResendGetData">重新发送</view><view class="Resend_box" v-else>重新发送<span>{{ time }}</span>s</view></view></view></view></view></view>
</template>

javaScript 代码如下：

<script>
export default {data() {return {isShow: true,againState: true,resendStatus: true, // 切换重新发送短信和倒计时的重新发送verificationCode: '', // 获取到的验证码 路由传递过来的telValue: '', // 手机号码// 验证码开始pasteResult: [1, 2, 3, 4, 5, 6], // 生成验证码盒子的个数input: [], // 用户输入的值被分割成的数组inputVerifications: '', // 输入的值// 验证码结束// 发送短信的秒数time: 60, // 重新发送短信等待时间realTime: null, //定时器,ropertyConsultantId: '' // 置业顾问id};},components: {},onLoad(option) {this.verificationCode = option.verificationCode;this.telValue = option.valuebox;},onShow() {this.forTheFirstTime();},mounted() {// this.nextStep();},methods: {// 开始// 解决一个输入框输入多个字符inputEvent() {var index = e.target.dataset.index * 1;var el = e.target;this.$set(this.input, index, el.value.slice(0, 1));console.log(this.pasteResult, '输入的验证码');},// 隐藏输入框的交互逻辑inputVerification(e) {let inputValue = e.target.value;this.inputVerifications = inputValue;this.input = inputValue.split('');if (this.inputVerifications.length == 6) {// this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.input.__ob__.value.join('')}`)this.$apiPost(`/api/estate_show/property_consultant/verification?tel=${this.telValue}&rand=${this.inputVerifications}`).then(data => {console.log(data, '用输入的值去验证 手机验证');if (data.identity == 'DYNATOWN') {this.ropertyConsultantId = data.consultantId;uni.showToast({title: '置业顾问认证成功',duration: 2000,icon: 'none'});// 跳转uni.navigateTo({url: `/pages/propertyConsultant/verificationCode?ropertyConsultantId=${this.ropertyConsultantId}`});}}).catch(err => {console.log(err.status, '验证失败请重新输入');if (err.status == 'error') {uni.showToast({title: '验证失败，请重新获输入',duration: 2000,icon: 'none'});this.againState = false;// this.inputVerifications = ''; // 验证失败后清空// this.input = []; // 验证失败后清空}});}},// 重新获取验证码ResendGetData() {this.resendStatus = false;this.againStat = true;console.log('开启定时');console.log(this.telValue, '传递过来的手机号');this.$apiPost(`/api/estate_show/property_consultant/authentication?tel=${this.telValue}`).then(data => {console.log(data, '已发送手机验证');if (data) {this.verificationCode = data; // 这里只是覆盖验证码打印台测试} else {return;}});let that = this;that.realTime = setInterval(() => {// console.log(this.time--,'开启定时')if (this.time-- <= 0) {console.log(this.time--, '清除定时');that.clearIntervalData();that.resendStatus = true;this.againState = true;that.time = 60; // 重新重置为60秒}}, 1000);},// 清除定时器clearIntervalData() {// clearInterva(this.setTime)clearInterval(this.realTime); //  清除定时器console.log('关闭定时');},// 第一次进来就倒计时forTheFirstTime() {this.resendStatus = false;let that = this;that.realTime = setInterval(() => {// console.log(this.time--,'开启定时')if (this.time-- <= 0) {console.log(this.time--, '清除定时');that.clearIntervalData();that.resendStatus = true;this.againState = true;that.time = 60; // 重新重置为60秒}}, 1000);}}
};
</script>

css代码如下需要用scss编译如下

<style lang="scss" scoped>
.Box {background-color: #fff;width: 100vw;height: 100vh;.Get_the_prize {display: flex;justify-content: space-between;padding: 0rpx 30rpx;.Award_name {width: 50%;height: 80rpx;line-height: 80rpx;font-size: 28rpx;font-weight: 500;color: #333333;}.Award_input {width: 50%;height: 80rpx;line-height: 80rpx;display: flex;// line-height: 112rpx;align-items: center;}}// 验证码开始// 第二版验证码/* 六个显示框容器 */.verification_frame {padding: 0 30rpx;.top_three {width: 80%;height: 120rpx;margin: 0 auto;display: flex;align-items: center;justify-content: center;/* 六个框显示框 */.input {width: 14%;height: 100rpx;border-bottom: 2rpx solid #b8b8b8;margin-right: 12rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;> text {font-size: 44rpx;color: #333333;}}/* 模拟下边框线的焦点 */.inb {border-bottom: 2rpx solid #026bac;}/* 闪烁的假焦点竖线 */.fours {width: 5rpx;height: 40rpx;margin: auto;background-color: #000000;margin-top: 35rpx;animation: show 0.8s linear infinite;/* 模拟焦点动画  更改animation以更改动画样式*/@keyframes show {from {background-color: #000000;}to {background-color: #ffffff;}}}}/* 隐藏的inpit容器 */.top_four {width: 100%;height: 100rpx;margin: auto;margin-top: -100rpx;background-color: #fff;// 隐藏的输入框.input_show {position: fixed;width: 105%;height: 100rpx;left: -110rpx;top: 86rpx;// border: 2rpx solid #aaaa7f;opacity: 0;text-align: left;color: rgba(255, 255, 255, 0);}}}// 第二版结束// 验证码结束.getVerification {margin-top: 40rpx;padding: 0 30rpx;.Tips_box {display: flex;justify-content: space-between;height: 34rpx;font-size: 24rpx;font-weight: 400;color: #999999;line-height: 34rpx;text-align: center;margin-top: 20rpx;.Verification_tips {width: 50%;color: #999999;.Resend_box {text-align: right;color: #999999;}.Resend_view {text-align: right;color: #333333;font-weight: 600;}}// 验证码错误时.error_tips {color: #de3f59;}}}
}
</style>

输入6位数验证码的实现原理相关推荐

[转] ASP.NET1.1（C#）中验证码产生的原理及应用
实现原理: 通过随机函数产生验证码元素,将数值型的验证码元素转换成字符型然后再连成字符串,将验证码字符串写入Cookie以供验证时调用. 通过后台动态绘制位图的方法,绘制一个指定大小的位图,然后在空白 ...
手机短信接收验证码的实现原理
关于手机短信接收验证码的实现原理: 思路: A:获得验证码: 1.找到相关的表. 2.用什么发送,post,get ,ajax,当然ajax首选 3.post之前要js先判断是手机号码11位,并且全部 ...
php实现验证码正确输入_PHP实现验证码
验证码是什么验证码为全自动区分人和计算机的图灵测试的缩写,是一种区分用户是计算机或人的公共全自动程序. 验证码应用场景登录.注册确定提交之前,做人/及其校验发布.回复信息之前,做人/及其校验疑 ...
手机短信接收验证码的实现原理:
关于手机短信接收验证码的实现原理: 思路: A:获得验证码: 1.找到相关的表. 2.用什么发送,post,get ,ajax,当然ajax首选 3.post之前要js先判断是手机号码11位,并且全部 ...
.NET MVC 保存Session值,6位数验证码
//6位数验证码: Random rm = new Random(); string str = rm.Next(100000, 1000000).ToString(); //MVC控制器Action ...
php 生成验证码干扰元素,PHP生成指定位数验证码与可控干扰元素第二篇
这篇文章介绍的内容是关于PHP生成指定位数验证码与可控干扰元素第二篇,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下生成验证码:文件名为:buildVerifyCode.func.ph ...
python random.random 缩短小数点儿后位数_Python random模块制作简易的四位数验证码...
先给大家介绍下python中random模块 random与numpy.random对比: 1.random.random():生成[0,1)之间的随机浮点数: numpy.random.random ...
Java版设计一个程序, 输入三位数a, 分别输出个,十,百位
1. 设计一个程序, 输入三位数a, 分别输出个,十,百位. (0<a<1000) 样例输入: 251 样例输出: 2 5 1 package package01; import java ...
输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...

输入6位数验证码的实现原理

输入6位数验证码的实现原理相关推荐

最新文章

热门文章