<pre name="code" class="js"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
.code
{
background-image:url(code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged
{
border:0;
}
</style>
<script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
function createCode()
{
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = 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 charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
if(checkCode)
{
checkCode.className="code";
checkCode.value = code;
}
}
function checkVerifyCode()
{
var inputCode = document.getElementById("verifyCodeID").value ;
if(inputCode.length <=0)
{
alert("请输入验证码！");
}
else if(inputCode.toLowerCase() != code.toLowerCase() )
{
alert("错误的验证码！");
document.getElementById('verifyCodeID').value='';
createCode();//刷新验证码
} else{
alert("^_^ OK!");
}
}
</script>
</head>
<body onload="createCode()">
<form action="#">
<table>
<tr>
<td><span id="showR">*</span>验证码：</td>
<td>
<input type="text" id="verifyCodeID" onblur="checkVerifyCode();"/>
<input style="cursor:pointer; border:0;width=80px; " type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchangeds" size="4"/> <a style="cursor:pointer" onclick="createCode();">看不清？</a>
</td>
</tr>
</table>
<input id="Button1" onclick="checkVerifyCode();" type="button" value="确定" />
</form>
</body>
</html></pre>
分享到：
相关推荐
### JS生成验证码知识点详解 #### 一、代码结构与功能概述 本文档介绍了一个使用JavaScript实现的简单网页验证码生成及验证方法。通过该方法，可以在网页上动态生成一个由数字和字母组成的验证码，并且能够对用户...
用javascript实现页面验证码，这是一个很好的例子
- 使用JavaScript生成随机字符串。 - 如果使用Canvas，使用`canvas.getContext('2d')`获取2D渲染上下文，然后绘制字符串，应用扭曲、旋转等效果。 - 将验证码显示在页面上，同时将生成的字符串保存在服务器端或...
### JavaScript生成验证码知识点详解 #### 一、背景与概述 在Web开发中，验证码是一种常见的安全机制，用于区分用户是人还是自动化程序。通过让用户输入随机产生的字符串或完成某些特定任务来验证用户身份，可以...
在项目中，"页面登陆随机验证码"可能包含了JSP页面的HTML和JavaScript代码，用于显示和处理用户输入的验证码，以及后台的Java类，负责生成和验证验证码。学习这个项目，你可以了解如何在实际开发中结合前端和后端...
生成四位验证码的核心在于使用JavaScript生成随机数，并将这些随机数拼接成一个字符串。此功能主要由`createCode()`函数完成。 **具体步骤：** - 定义一个数组`random`，包含0到9的所有数字。 - 使用`for`循环生成...
1. **服务器端生成验证码**：服务器上需要有一个生成验证码的逻辑，这通常涉及到随机生成一组中文字符或数字，然后将其存储到服务器会话（session）或者Cookie中，以供后续验证使用。 2. **Ajax请求**：当用户触发...
JavaScript验证码通常包含两个主要部分：生成验证码图像的后端代码和验证用户输入的前端代码。后端生成随机的字符串或数字，并将其转化为图像，然后发送到客户端。前端则负责显示图像并接收用户输入的验证码，随后...
生成验证码的关键在于随机性和复杂性，以确保难以被计算机程序破解。C#中可以使用`Random`类生成随机数，结合字符集来构建验证码字符串。 3. **图像处理**：生成的验证码需要显示为图像，这涉及到C#中的图像处理...
在这个"jQuery随机生成验证码插件代码"中，我们主要关注的是如何利用jQuery实现一个功能完善的验证码生成功能。 首先，验证码的主要目的是为了验证用户的身份，防止自动机器人或恶意软件进行非法操作。它通常由一组...
生成验证码后，我们可以将其显示在HTML页面上的特定元素中，例如一个`<canvas>`元素，或者用CSS生成背景图片。如果是图片验证码，可以利用`canvas`的绘图功能绘制随机扭曲的线条，增加识别难度。对于JavaScript...
由于我们在生成验证码时保存了图形和字符的信息，因此可以通过比对用户的输入和原始数据来判断是否匹配。如果匹配成功，允许用户继续操作；如果不匹配，提示用户重新输入。 总结一下，这个“vue插件——使用canvas...
生成验证码的源代码。由servlet生成验证码和验证码图片。 能够产生验证码但是如何传输和验证呢，一般是传回服务器在action里做验证。 我还是喜欢js页面产生验证码，因为简单，...所以也附带了个js生成验证码的例子。
在本文中，我们将深入探讨如何使用JavaScript生成验证码，这是一个常见的安全机制，用于防止自动化程序（如机器人）对网站进行恶意操作。 验证码的主要目的是验证用户是人类而非机器。在网页中，它通常表现为一组...
js实现页面随机生成验证码（验证码混淆）-附件资源
整个html打开可以看到效果，不包含验证码背景图片，自己找一个命名为code.jpg就有背景了，js验证码比jsp验证码好处在于：对于一个注册或者登陆页面，如果想通过点击提交按钮触发js事件，那么jsp用的是(String)...
接下来，我们编写JavaScript代码（如verifiable.js）来生成和绘制验证码。这通常包括以下步骤： 1. **生成随机字符串**：首先，我们需要生成一个包含随机字符的字符串。可以使用JavaScript的`Math.random()`函数和`...
// 生成验证码逻辑 String captchaCode = generateCaptchaCode(); session.setAttribute("captcha", captchaCode); // 将验证码绘制为图像并输出 byte[] imageBytes = drawCaptchaImage(captchaCode); ...
1. **随机数生成**：首先，代码会使用编程语言提供的随机数生成函数，如JavaScript的`Math.random()`，来创建一系列随机数字和/或字母。随机性是验证码安全性的基础，确保每次生成的验证码都是独一无二的。 2. **...