纯前端控制的数字验证

  • 今日要实现一个纯字母和数字的前端验证。很多时候我们看到的验证都是后端传图片过来前端验证的。但是有些安全性要求不是很高的页面往往就不需要后端支持。

html

只显示核心代码:

1
2
3
4
<input class="form-input" type="text" placeholder="请输入图片验证码" id="authCode" />
<span class="form-valid">
<a id="code" href="#" onclick="filter.createCode()" title="点击更换验证码" ></a>
</span>

1
2
3
4
5
6
7
#code {
padding: 0.1rem 0.2rem;
background: -webkit-linear-gradient(rgb(221, 221, 221), rgb(8, 167, 80));
font-size: 0.28rem;
color: #ffffff;
cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var code; //在全局定义验证码
var filter = {
createCode: function() { //生成二维码
code = "";
var codeLength = 4; //验证码的长度
var random = 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 index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35)
code += random[index]; //根据索引取得随机数加到code上
}
$("#code").html(code); //把code值赋给验证码
$("#code").attr('style', 'background:-webkit-linear-gradient(' + filter.randomColor() + ',' + filter.randomColor());
},
randomColor: function() { //更换背景色
var codeColor = "";
var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'); //颜色范围编码
for (var i = 0; i < 6; i++) { //循环操作
var index = Math.floor(Math.random() * 16); //取得随机数的索引(0~35)
codeColor += random[index]; //根据索引取得随机数加到code上
}
return "#" + codeColor;
},
validate: function() { //校验二维码
var inputCode = $("#authCode").val().toUpperCase(); //取得输入的验证码并转化为大写 (因为上边没有出现小写情况)
if (inputCode.length <= 0) { //若输入的验证码长度为0
showDialogOrPromptSuccessMsg(yprompt, "请输入验证码!", 1500); //则弹出请输入验证码 ( showDialogOrPromptSuccessMsg 请忽略,只是一个自定义弹框。用alert一样的)
} else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时
showDialogOrPromptSuccessMsg(yprompt, "验证码输入错误!@_@", 1500); //则弹出验证码输入错误
filter.createCode(); //刷新验证码
$("#authCode").val(""); //清空文本框
} else { //输入正确时
showDialogOrPromptSuccessMsg(yprompt, "合格!^-^", 1500);
}
}
}
$(function() {
filter.createCode();
})

注释上都写的很清楚了:

  1. 一个生成验证码的方法,验证码长度自己定义。这边用的全部是大写,还可以加入小写,小写的话验证那边也要稍微改下。
  2. 生成背景色的方法,这边采用的的是渐变色。按照功能点讲,这个方法可以不需要。只是为了追求色彩丰富点。
  3. 验证二维码的方法。这个也比较简单。就是和值进行比较。
谢谢你给我的支持,坚持原创技术分享,共同成长