文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp手机验证码输入框如何实现

2023-07-05 04:55

关注

本篇内容主要讲解“uniapp手机验证码输入框如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“uniapp手机验证码输入框如何实现”吧!

uniapp手机验证码输入框如何实现

uniapp手机验证码输入框如何实现

uniapp手机验证码输入框如何实现

uniapp手机验证码输入框如何实现

uniapp手机验证码输入框如何实现

如键盘被隐藏,可直接点击蓝框弹出键盘,蓝框就相当于input的光标,验证码输入错误之后会将字体以及边框改为红色,持续1.5s(可自行修改时间),然后清空数据。

<template><view class="code"><view class="code-tip-one">请输入验证码<view class="code-tip">已向<text>+86 {{phone.substring(0, 3)}}****{{phone.substr(phone.length-4)}}</text>发送验证码</view><view class="code-errow" v-if="codeclolor == '#ff0000'">验证码输入错误</view></view><input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"value="code" v-model="code" type="number" maxlength="6" /><view class="code-input"><view v-for="(item,index) in 6" :key="index" @click="codefocus(index)":style='(index == code.length? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>{{code[index] && code[index] || ''}}</view></view><block v-if="sec!=20"><view class="recode">重新发送({{sec}}s)</view></block><button @click="getCode()" type="primary" :disabled="verifyShow" >发送短信</button></view></template> <script>export default {data() {return {phone:'12345678910',// 验证码输入聚焦focus: true,//input焦点,用于键盘隐藏后重新唤起// 验证码框颜色codeclolor: "#313131",//自定义光标的颜色// 验证码获取秒数sec: '20',//这是重新获取验证码的倒计时(可根据需求修改)code: '',//这是用户输入的验证码codeCorrect:'',//正确的验证码verifyShow:false,//是否禁用按钮}},methods: {// 输入验证码codenum: function(event) {// console.log('输入的值',event.target.value)var that = thisvar code = event.target.valuethat.code = codeif (code.length == 6) {if (code == that.codeCorrect) {                //输入六位验证码后自动进行验证并执行验证成功的函数console.log('验证码正确:',that.code)} else {console.log('验证码错误!!!:',that.code)that.codeclolor = "#ff0000"setTimeout(function() {that.code = []event.target.value = ""that.codeclolor = "#313131"}, 1500)}}},// 键盘隐藏后设置失去焦点blur: function() {var that = thisthat.focus = false},// 点击自定义光标显示键盘codefocus: function(e) {var that = thisif (e == that.code.length) {that.focus = true}},getCode(){//获取验证码const that = thisthat.codeCorrect = that.getVerificationCode(6)  //可以不传值,默认为4位随机码console.log('生成的随机码为:' + that.codeCorrect)that.timedown(that.sec)// 倒计时},//随机生成几位数getVerificationCode(codeLength){ //传入需要的字符串长度,不传默认为4// 准备一个用来抽取码的字符串,或者字典// let verification_code_str = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  //数字和字母let verification_code_str = "0123456789";     //纯数字// 获取某个范围的随机整数,封装的函数,在上面抽取字典的时候进行了调用function getRandom(min, max) {//意思是获取min-max数字之间的某个随机数,直接调用即可return Math.round(Math.random() * (max - min) + min);}let newStr = '';                    //创建一个空字符串,用来拼接四位随机码for (var i = 0; i < codeLength; i++) {       //for循环四次,则拼接四次随机码newStr += verification_code_str[getRandom(0, verification_code_str.length - 1)];   //从字典中随机选一个下标,并拼接到空字符串中}return newStr},//倒计时timedown:function(num){let that = this;if(num == 0){that.verifyShow = false; // 不禁用获取验证码按钮that.sec = 20return clearTimeout();}else{that.verifyShow = true;// 禁用获取验证码按钮setTimeout(function() {  that.sec = num-1that.timedown(num-1);  }, 1000);//定时每秒减一  }},}}</script> <style scoped lang="less">    .code {margin: auto;margin-top: 50rpx;width: 650rpx;height: auto;}     .code-tip-one {width: 650rpx;height: 250rpx;line-height: 100rpx;font-size: 60rpx;font-weight: bold;color: #313131;} .code-tip {width: 650rpx;height: 100rpx;line-height: 50rpx;font-size: 30rpx;font-weight: normal;color: #8a8a8a;} .code-errow {width: 650rpx;height: 50rpx;line-height: 25rpx;font-size: 28rpx;font-weight: normal;color: #ff0000;} .code-tip>text {padding: 0 20rpx;width: 650rpx;font-size: 30rpx;font-weight: normal;color: #ff5500;}     .code-input {margin: auto;width: 650rpx;height: 100rpx;display: flex;} .code-input>view {margin-top: 5rpx;margin-left: 15rpx;width: 86rpx;height: 86rpx;line-height: 86rpx;font-size: 60rpx;font-weight: bold;color: #313131;text-align: center;border-radius: 10rpx;} .code-input>view:nth-child(1) {margin-left: 0rpx;} .cinput {position: fixed;left: -100rpx;width: 50rpx;height: 50rpx;}.recode{margin-top: 20rpx;width: 200rpx;height: 80rpx;line-height: 80rpx;color: #707070;font-size: 28rpx;}</style>

实现思路:创建六个正方形的view(使用for循环),然后创建一个数字input,最大输入长度为六位(根据验证码的长度),再将input隐藏掉,获取到的值分别放到六个view中。

其中验证码验证失败之后利用v-model双向绑定进行清空已经输入的值

注意:单纯的输出 code[index] 不会展示空只会展示未定义,必须加上 {{code[index] && code[index] || ''}} 进行判断替换为空,密码输入框替换字符,也就是与或非的意思吧

如果是不想展示验证码信息可以改为{{code[index] && '●' || ''}},这样你输入是参数就会被替换为●●●●●●

到此,相信大家对“uniapp手机验证码输入框如何实现”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯