验证码技术总结（1）-js生成

来源：互联网发布：js 手写板编辑：程序博客网时间：2024/06/05 17:46

近期在进行网站系统的优化，浏览代码的时候看到了关于一段验证码的代码，突然想到了我的毕业设计中也用到了小白级别的验证码。所以算是经验“老道”了。总结总结。以备后用。

拍脑袋想一想，我们可以有两种方式形成验证码：js生成和服务器端生成

以两个案例进行说明。

第一个案例就是，我的毕业设计中验证码的生成，超级简单。

做的时候就是完全按照自己的想法用js写了一个（在一个页面内就搞定）。

需求：

输入框后面跟着一个灰色的验证码显示区域
输入验证码之后可以验证填写是否正确，若不正确可以进行提示
页面设计：

实现：

页面元素

2.引入jquery.js

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

3.生成验证码的函数为

function zcylValidateCode() {

//初始化验证码

var a = Math.floor(Math.random()*10);

var b = Math.floor(Math.random()*10);

var c = Math.floor(Math.random()*10);

var d = Math.floor(Math.random()*10);

$("#validateCode").html(a);

$("#validateCode").append(b).append(c).append(d);

}

4.在加载页面时调用此函数

$(document).ready(function(){

zcylValidateCode();

});

5.填写之后，当焦点离开输入验证码的输入框之后，验证验证码填写是否正确，验证代码如下：

$(document).ready(function(){

zcylValidateCode();

$("#validate").focusout(function(){

if($("#validate").val() != $("#validateCode").html()){

alert("验证码填写错误!");

}

});

5.最终的代码如下所示：百度网盘下载地址

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function zcylValidateCode() {
//初始化验证码
var a = Math.floor(Math.random()*10);
var b = Math.floor(Math.random()*10);
var c = Math.floor(Math.random()*10);
var d = Math.floor(Math.random()*10);
$("#validateCode").html(a);
$("#validateCode").append(b).append(c).append(d);
}
$(document).ready(function(){
zcylValidateCode();
$("#validate").focusout(function(){
if($("#validate").val() != $("#validateCode").html()){
alert("验证码填写错误!");
}
});
});

</script>
</head>
<body>
<input type="text" required="required" placeholder="验证码"
autocomplete="off" id="validate" title="验证码" style="float: left;">
<div style="background-color: grey; float:left; width: 32px; margin-left: 5px;" id="validateCode"></div>
</body>
</html>

0 0