HTML部分:
<body onload="createCode()">
<!--在页面加载的同时要加载验证码,否则页面加载完后验证码不会显示 -->
<p>
<label> 验证码:</label>
<div class="code" id="checkCode" onclick="createCode()"></div>
</p>
<p>
<label>请输入验证码:</label><input id="YZ" name="yz" width="30px;">
</p>
<input class="btttom" type="button" name="OK" id="OK" onclick="GetDom()" value="确认" />
</body>
css部分:
/*验证码*/
.code {
background-color: silver;
font-family: Arial;
/*设置字体*/
font-style: initial;
color: brown;
font-size: 20px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
width: 81px;
height: 23px;
margin-left: 120px;
margin-top: -35px;
cursor: pointer;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
.yz {
position: absolute;
margin-left: 220px;
margin-top: -10px;
}
js部分:
<script src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--验证-->
<script>
var code;
function createCode() { //函数体
code = "";
var codeLength = 5; //验证码的长度
var checkCode = $('#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() * 52);//设置随机产生
code += codeChars[charNum];
}
if (checkCode) {
checkCode.addClass('code');
checkCode.html(code) ;
}
}
function GetDom() {
if ($('#YZ').val() == "") {
alert("验证码不能为空!");
createCode();//输错一次或提交一次都将会刷新一次验证码
return false; //结束本次会话
} else if ($('#YZ').val().toUpperCase() != code.toUpperCase()) { //toUpperCase不区分大小写
alert("您输入的验证码有误,请重新输入!!");
createCode();//读取文件
}
else {
alert("ok");
}
}
</script>