JavaScript登录验证码的实现


Posted in Javascript onOctober 27, 2016

废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示:

1.js

var code="" ; //在全局 定义验证码
function createCode(){ 
code = "";
var codeLength = 6;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
document.getElementById("checkCode").innerHTML = code;
}
function validate () {
var inputCode = document.getElementById("checkNum").value.toUpperCase();
if(inputCode.length <=0) {
alert("请输入验证码!");
return false;
}
else if(inputCode != code ){
alert("验证码输入错误!");
createCode();
return false;
}
else {
alert("验证码通过!");
return true;
}
}

2.html

<body onload="createCode();">
<input type="text" value="" id="checkNum" />
<a id="checkCode" onclick="createCode()"></a>
<input type="button" class="btnCheck" id="gotoCheck" value="验证" onclick="validate();" />

以上所述是小编给大家介绍的JavaScript登录验证码的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
详解Vue This$Store总结
Dec 17 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
编写Python CGI脚本的教程
2015/06/29 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python缓存技术实现过程详解
2019/09/25 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
.net工程师笔试题
2012/06/09 面试题
舞蹈专业求职信
2014/06/13 职场文书
保密工作目标责任书
2014/07/28 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
教学督导岗位职责
2015/04/10 职场文书
校车司机安全责任书
2015/05/11 职场文书