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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
javascript学习之json入门
2016/12/22 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
对python中UDP,socket的使用详解
2019/08/22 Python
简单了解python元组tuple相关原理
2019/12/02 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python logging模块的使用详解
2020/10/23 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
学期自我鉴定
2013/11/04 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
高中军训感想300字
2014/03/04 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
追悼会主持词
2014/03/20 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2015年清明节活动总结
2015/02/09 职场文书
土建技术员岗位职责
2015/04/11 职场文书