站长资源
首先和其他前端的验证一样，并不推荐只使用单一的前端来验证，今天我们只是作为学习层面来讲解如何用JS实现验证码功能。
先写一个基本的html结构
<div class="box">
<input type="text" placeholder="请输入验证码" class="input">
<a href="javascript:;"><span id="checkCode"></span> 换一张</a><br>
<span class="tip"></span>
</div>
加上适当的css样式
a {
text-decoration:none;
}
.box {
width:300px;
margin:100px auto;
}
.input {
width:150px;
height:30px;
}
#checkCode {
width:70px;
height:35px;
font-size:22px;
text-align:center;
line-height:30px;
display:inline-block;
border:1px solid #ccc;
}
得到如图所示：
思路分析
1、我们需要一个随机的字符串作为验证码
2、点击之后要能够更换验证码
3、验证码输入是否正确要有提示
一、先来看第一点如何生成一个随机的字符串作为验证码
我们想到是给JS的数组手动赋予一些字符串，然后随机抽取，如：
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 code="";
for (var i = 0; i < 4; i++) {
var charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}
我们循环四次，每次都获取一个随机数字作为数组的下标，然后组成一个四位的字符串，为什么*52,因为Math.random()返回0-1的随机数，所以这个只要小于等于你的数组成员个数即可
这样我们就获取了四位的验证码并存储在了code变量中
然后将其显示在dom元素中
var checkCode = document.getElementById("checkCode");
checkCode.innerHTML = code;
二、点击更换验证码
这个很简单，我们只需要再次执行上面的创建验证码即可
假如上面的生成验证码操作我们命名为createCode()函数
那么只需要添加一个onclick()事件再次调用即可
<a onclick="createCode()">换一张</a>
三、验证码正确与否的提示
我们能想到方式有两种
1、增加一个按钮，输入完让用户主动点击确定，然后验证
2、在用户输入的时候时时验证
很显然第一种在验证码的应用上并不常见，因此我们选择第二种方式
这里监听用户的输入结束事件onkeyup来实现时时判断
首先获取生成的验证码
这里就是我们上面的变量code
然后时时获取我们输入的验证码
xxx.onkeyup = function() {
var inputCode = document.querySelector(".input").value;
}
然后对其进行判断一下长度以及正确与否，错误红色提示，正确绿色提示
if (inputCode.length <= 0) {
tip.innerText = "不能为空！";
tip.style.color = "red";
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
tip.innerText = "输入错误";
tip.style.color = "red";
} else {
tip.innerText = "√输入正确";
tip.style.color = "green";
}
至此我们就完成了使用JS创建验证码的全部功能
附完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何用JS数组实现前端验证码功能</title>
<style>
a {
text-decoration:none;
}
.box {
width:300px;
margin:100px auto;
}
.input {
width:150px;
height:30px;
}
#checkCode {
width:70px;
height:35px;
font-size:22px;
text-align:center;
line-height:30px;
display:inline-block;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<input type="text" placeholder="请输入验证码" class="input">
<a href="javascript:;" onclick="createCode()"><span id="checkCode"></span> 换一张</a><br>
<span class="tip"></span>
</div>
<script>
var code;
function createCode() {
code = "";
var codeLength = 4; //验证码的长度
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() * 52);
code += codeChars[charNum];
}
if (code) {
checkCode.innerHTML = code;
}
}
createCode();
var input = document.querySelector(".input");
var tip = document.querySelector(".tip");
input.onkeyup = function() {
var inputCode = document.querySelector(".input").value;
if (inputCode.length <= 0) {
tip.innerText = "不能为空！";
tip.style.color = "red";
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
tip.innerText = "输入错误";
tip.style.color = "red";
// createCode();
} else {
tip.innerText = "√输入正确";
tip.style.color = "green";
}
}
</script>
</body>
</html>
本文由站长资源原创首发，转载请注明出处
评论前必须登录！
注册