如何用js生成简单验证码，并验证是否正确的方法
1、html页面如下
<div>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td> <div id="checkCode" class="code" onclick="createCode(4)" ></div></td>
<td> <span onclick="createCode(4)">看不清换一张</span></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" id="inputCode" style="float:left;" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="validateCode()" value="确定" /></td>
</tr>
</table>
</div>
2、js脚本如下
//页面加载时，生成随机验证码
window.onload=function(){
createCode(4);
} //生成验证码的方法
function createCode(length) {
var code = "";
var codeLength = parseInt(length); //验证码的长度
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 i = 0; i < codeLength; i++)
{
//获取随机验证码下标
var charNum = Math.floor(Math.random() * 62);
//组合成指定字符验证码
code += codeChars[charNum];
}
if (checkCode)
{
//为验证码区域添加样式名
checkCode.className = "code";
//将生成验证码赋值到显示区
checkCode.innerHTML = code;
}
} //检查验证码是否正确
function validateCode()
{
//获取显示区生成的验证码
var checkCode = document.getElementById("checkCode").innerHTML;
//获取输入的验证码
var inputCode = document.getElementById("inputCode").value;
//console.log(checkCode);
//console.log(inputCode);
if (inputCode.length <= 0)
{
alert("请输入验证码！");
}
else if (inputCode.toUpperCase() != checkCode.toUpperCase())
{
alert("验证码输入有误！");
createCode(4);
}
else
{
alert("验证码正确！");
}
}
3、验证码效果图如下：
aaarticlea/png;base64,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" alt="" width="321" height="134" />aaarticlea/png;base64,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" alt="" width="357" height="134" />
注：createCode可以传递参数，决定生成验证码的位数
4、整体demo源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js简单验证码使用</title>
<style>
.code
{
font-family:Arial;
font-style:italic;
color:blue;
font-size:30px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
float:left;
cursor:pointer;
width:150px;
height:50px;
line-height:60px;
text-align:center;
vertical-align:middle;
background-color:#D8B7E3;
}
span {
text-decoration:none;
font-size:12px;
color:#288bc4;
padding-left:10px;
} span:hover {
text-decoration:underline;
cursor:pointer;
} </style>
</head>
<script>
//页面加载时，生成随机验证码
window.onload=function(){
createCode(4);
} //生成验证码的方法
function createCode(length) {
var code = "";
var codeLength = parseInt(length); //验证码的长度
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 i = 0; i < codeLength; i++)
{
//获取随机验证码下标
var charNum = Math.floor(Math.random() * 62);
//组合成指定字符验证码
code += codeChars[charNum];
}
if (checkCode)
{
//为验证码区域添加样式名
checkCode.className = "code";
//将生成验证码赋值到显示区
checkCode.innerHTML = code;
}
} //检查验证码是否正确
function validateCode()
{
//获取显示区生成的验证码
var checkCode = document.getElementById("checkCode").innerHTML;
//获取输入的验证码
var inputCode = document.getElementById("inputCode").value;
console.log(checkCode);
console.log(inputCode);
if (inputCode.length <= 0)
{
alert("请输入验证码！");
}
else if (inputCode.toUpperCase() != checkCode.toUpperCase())
{
alert("验证码输入有误！");
createCode(4);
}
else
{
alert("验证码正确！");
}
}
</script>
<body>
<div>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td> <div id="checkCode" class="code" onclick="createCode(4)" ></div></td>
<td> <span onclick="createCode(4)">看不清换一张</span></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" id="inputCode" style="float:left;" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="validateCode()" value="确定" /></td>
</tr>
</table>
</div>
</body>
</html>