JavaScript登录验证码的实现
更新时间：2016年10月27日 09:32:29 作者：非非是
验证码功能真的无处不在，为了提高网站的安全性，验证码功能是必要的环节，今天小编通过本文给大家分享js登录验证码的实现，感兴趣的朋友跟着小编一起学习吧
废话不多说，实现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登录验证码的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了利用js canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
javascript中将Object转换为String函数代码 (json str)
下面的代码就是想将Object转换为String函数,需要的朋友可以参考下2012-04-04
这篇文章主要介绍了Typescript定义多个接口类型声明的方式小结,在 TypeScript 中,您可以使用交叉类型(&)或联合类型(|)来组合多个接口,从而实现多个接口类型的混合,文中通过代码讲解的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下2017-08-08
日常开发中通常会对时间进行下面这几个操作,比如获取时间,设置时间,格式化时间,比较时间等等,下面这篇文章主要给大家介绍了关于moment.js使用方法的相关资料,需要的朋友可以参考下2024-03-03
很多朋友都听说过比特币和以太币这样的加密货币，但是只有极少数人懂得隐藏在它们背后的技术，接下来通过本文给大家介绍用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的，感兴趣的朋友一起看看吧2018-03-03
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
在web前端开发中js中的作用域，提升，闭包知识是经常用到的也是很容易混淆的知识点，接下来小编整理了本教程帮助大家学习2016-09-09
这篇文章主要介绍了JS绘图Flot如何实现动态可刷新曲线图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
本文主要介绍了JavaScript展开运算符和剩余运算符的区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最近接触了一下html5，当然，接触过html5的人都知道，html5也不过是提供一些新的标签而已，至于整下实现的核心，还是在javascript这里。2011-08-08
最新评论