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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue地区选择组件教程详解
May 04 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
javascript实现简易的计算器
Jan 17 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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单例模式应用详解
2013/06/03 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
python机器学习之神经网络(二)
2017/12/20 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
Python如何合并多个字典或映射
2020/07/24 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
写给女生的道歉信
2014/01/08 职场文书
不假外出检讨书
2014/01/27 职场文书
高中军训感言800字
2014/03/05 职场文书
世博会口号
2014/06/20 职场文书
画展邀请函
2015/01/31 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
复活读书笔记
2015/06/29 职场文书
python绘制箱型图
2021/04/27 Python