JavaScript验证码生成和验证效果
JavaScript验证码生成和验证效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了动态生成验证码，并且能够实现验证码输入的验证。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.v_code {
width: 600px;
margin: 0 auto;
}
.v_code > input {
width: 60px;
height: 36px;
margin-top: 10px;
}
.code_show {
overflow: hidden;
}
.code_show span {
display: block;
float: left;
margin-bottom: 10px;
}
.code_show a {
display: block;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.code {
font-style: italic;
background-color: #f5f5f5;
color: blue;
font-size: 30px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
padding: 0 5px;
text-align: center;
}
#inputCode {
width: 100px;
height: 30px;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
</style>
<script>
var code;
function createCode() {
code = "";
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById("checkCode");
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
for (var index = 0; index < codeLength; index++) {
var charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}
if (checkCode) {
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
function validateCode() {
var inputCode = document.getElementById("inputCode").value;
var textShow = document.getElementById("text_show")
if (inputCode.length <= 0) {
textShow.innerHTML = "请输入验证码";
textShow.style.color = "red";
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
textShow.innerHTML = "您输入的验证码有误";
textShow.style.color = "red";
createCode();
} else {
textShow.innerHTML = "验证码正确";
textShow.style.color = "green";
}
}
function checkCode(){
var btn = document.getElementById("Button1");
btn.onclick=function(){
validateCode();
}
}
window.onload = function () {
checkCode();
createCode();
document.getElementById("checkCode").onclick = function () { createCode() }
linkbt.onclick = function () { createCode() }
inputCode.onclick = function () { validateCode(); }
}
</script>
</head>
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode"></span>
<a id="linkbt">看不清换一张</a>
</div>
<div class="input_code">
<label for="inputCode">验证码：</label>
<input type="text" id="inputCode"/>
<span id="text_show"></span>
</div>
<input id="Button1" type="button" value="确定" />
</div>
</body>
</html>
上面的代码实现了我们的妖气，下面介绍一下它的实现过程。
一.代码注释:
（1）.var code，声明一个变量，用来存储验证码。
（2）.function createCode() {}，此函数可以创建一个验证码。
（3）.code = ""，先将验证码设置为空。
（4）.var codeLength = 6，验证码的长度为6。
（5）.var checkCode = document.getElementById("checkCode")，获取id属性值为checkCode的元素对象。
（6）. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)，此数组用来存储验证码所使用的字符。
（7）.for (var index = 0; index < codeLength; index++) {
var charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}，通过for循环犯事创建一个长度为6的验证码字符串。
（8）.if (checkCode) {
checkCode.className = "code";
checkCode.innerHTML = code;
}如果存在checkCode元素对象。
那么就设置它的class属性值和html字符串内容。
（9）.function validateCode() {}，此函数实现了验证功能。
（10）.var inputCode = document.getElementById("inputCode").value，获取输入验证码的值。
（11）.var textShow = document.getElementById("text_show")，获取要显示警告与的元素对象。
（12）.if (inputCode.length <= 0) {
textShow.innerHTML = "请输入验证码";
textShow.style.color = "red";
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
textShow.innerHTML = "您输入的验证码有误";
textShow.style.color = "red";
createCode();
} else {
textShow.innerHTML = "验证码正确";
textShow.style.color = "green";
}上面是对验证码验证的简单逻辑。
（13）.function checkCode(){
var btn = document.getElementById("Button1");
btn.onclick=function(){
validateCode();
}
}，此函数可以实现事件处理函数的注册功能。
二.相关阅读:
（1）.Math.floor()参阅javascript Math.floor()一章节。
（2）.Math.random() 参阅js Math.random()一章节。
（3）.className参阅js className一章节。
（4）.innerHTML参阅innerHTML一章节。
（5）.toUpperCase()参阅javascript toUpperCase()一章节。
JavaScript验证码生成和验证效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript验证码生成和验证效果就介绍到这了。