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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
学习ExtJS table布局
2009/10/08 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python正则表达式的使用范例详解
2014/08/08 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python 异常处理总结
2016/10/18 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
EJB的激活机制
2013/10/25 面试题
分公司总经理岗位职责
2014/07/30 职场文书
社区志愿者活动方案
2014/08/18 职场文书
新员工考核评语
2014/12/31 职场文书
家长对孩子的寄语
2015/02/26 职场文书