一、HTML代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js验证码</title>
</head>
<body>
<div>
<table border="1">
<tr>
<td>
验证码：<input type="text" id="inputCode" placeholder="请输入验证码">
<span id="verify" style="cursor: pointer;"></span>
</td>
</tr>
<tr>
<td><input type="button" id="sub" value="提交"></td>
</tr>
</table>
</div>
</body>
</html>
二、JavaScript代码
<script src="jQuery文件路径"></script>
<script type="text/javascript">
var code;
//自动加载方法生成验证码
$(function () {
//调用方法生成验证码
createCode();
});
//通过点击生成验证码
$("#verify").on("click",function () {
//调用方法生成验证码
createCode();
});
//生成验证码
function createCode(){
code = "";
//验证码的长度
var codeLength = 4;
//所有候选组成验证码的字符
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');
for(var i = 0; i < codeLength; i++){
var charNum = Math.floor(Math.random() * 36);
code += codeChars[charNum];
}
//动态替换生成验证码
$("#verify").text(code);
}
//提交验证
$("#sub").on("click",function () {
//获取用户输入的验证码
var inputCode = $("#inputCode").val();
if(inputCode != code){
alert("验证码有误");
}else{
alert("验证码正确");
}
})
</script>
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
