vue生成随机验证码的示例代码
作者:J_Cherry 时间:2023-07-02 16:57:09
本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下:
样式自调,最终效果如图:
实现效果:
点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数
HTML
<input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma">
<input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br>
<span class="tishixiaoxi disappear">请输入验证码。</span>
<a class="user_login" @click="Login">登录</a>
JS
// 图片验证码
createCode(){
code = "";
var codeLength = 4;//验证码的长度
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(var i = 0; i < codeLength; i++) {
//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)
code += random[index];//根据索引取得随机数加到code上
}
this.checkCode = code;//把code值赋给验证码
},
// 失焦验证图和密码
checkLpicma(){
this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写
if(this.picLyanzhengma == '') {
//代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~
$(".login_content1 span:eq(2)").text("请输入验证码")
$(".login_content1 span:eq(2)").removeClass("disappear");
}else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) {
//若输入的验证码与产生的验证码不一致时
console.log( this.picLyanzhengma.toUpperCase())
//代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~
$(".login_content1 span:eq(2)").text("验证码不正确")
$(".login_content1 span:eq(2)").removeClass("disappear");
this.createCode();//刷新验证码
this.picLyanzhengma = '';
}else {
//输入正确时
//代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~
$(".login_content1 span:eq(2)").addClass("disappear");
$(".login_content1 span:eq(2)").text("请输入验证码")
return true;
}
}
友情提示:本文直接从项目拿来供大家思路参考,验证提示那块大家可根据自己情况做更改。懒得改的可以去我github拿demo。
demo已放到鄙人github,也可自取:https://github.com/JOSIE1988/JS-Random-authentication-code
来源:http://www.jianshu.com/p/c270d7dcf027
标签:vue,验证码
0
投稿
猜你喜欢
python实现批量解析邮件并下载附件
2023-07-05 02:32:16
pandas应用实例之pivot函数详解
2021-02-16 18:33:18
python使用nibabel和sitk读取保存nii.gz文件实例
2021-03-11 16:12:53
余弦相似性计算及python代码实现过程解析
2021-10-15 14:44:56
flask框架url与重定向操作实例详解
2022-02-08 17:49:39
用画为5.12地震受灾同胞们祈福
2008-05-20 12:08:00
python中filter函数的用法示例代码
2022-11-01 19:18:40
详解 python logging日志模块
2021-05-07 19:59:01
mysql实现按照某个时间段分组统计
2024-01-14 21:18:36
python开发一个解析protobuf文件的简单编译器
2021-08-11 12:01:22
IE6,7下实现white-space:pre-wrap;
2009-12-31 18:30:00
ACCESS 2007出现“错误 '80040e14'“
2008-06-19 13:21:00
MySQL数据库十大优化技巧
2024-01-25 22:51:28
Django 使用VScode 创建工程的详细步骤
2023-02-01 02:49:19
go开发中引用静态库.a文件的方法
2024-04-25 13:16:26
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2024-04-16 09:23:29
基于Golang实现Redis协议解析器
2024-04-27 15:37:41
Python numpy.array()生成相同元素数组的示例
2023-03-03 17:03:06
DVWA下载、安装、使用(漏洞测试环境搭建)的详细教程
2022-07-08 21:20:59
PyTorch中apex安装方式和避免踩坑
2023-06-20 15:19:57