验证码技术总结（1）-js生成_js验证码心得体会-优快云博客

本文介绍了一种使用JavaScript和jQuery生成简单验证码的方法，并通过前端验证确保用户输入正确。该方案适用于基本的网页登录验证场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

拍脑袋想一想，我们可以有两种方式形成验证码：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>