今天研究了jquery验证码的例子,和大家分享一下,也记录自己的点滴进步~~呵呵~~
1、VerifyCodeServlet.java
package verify;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class VerifyCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 验证码图片的宽度。
private int width = 140;
// 验证码图片的高度。
private int height = 60;
// 验证码字符个数
private int codeCount = 4;
private int x = 0;
// 字体高度
private int fontHeight;
private int codeY;
//去掉o和0,i和1
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };
/**
* 初始化验证图片属性 ,从web.xml中获得
*/
public void init() throws ServletException {
// 宽度
String sWidth = this.getInitParameter("width");
// 高度
String sHeight = this.getInitParameter("height");
// 字符个数
String sCodeCount = this.getInitParameter("codeCount");
//将配置的信息转换成数值
try {
if (sWidth != null && sWidth.length() != 0) {
width = Integer.parseInt(sWidth);
}
if (sHeight != null && sHeight.length() != 0) {
height = Integer.parseInt(sHeight);
}
if (sCodeCount != null && sCodeCount.length() != 0) {
codeCount = Integer.parseInt(sCodeCount);
}
} catch (NumberFormatException e) {
}
x = width / (codeCount + 1);
fontHeight = height - 2;
codeY = height - 4;
}
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, java.io.IOException {
// 定义图像buffer
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 创建一个随机数生成器类
Random random = new Random();
// 将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 创建字体,字体的大小应该根据图片的高度来定。
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
// 设置字体。
g.setFont(font);
// 画边框。
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
// 随机产生180条干扰线,使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for (int i = 0; i < 180; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// randomCode用于保存随机产生的验证码
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
// 随机产生codeCount数字的验证码。字,字母,颜色都是随机分配的
for (int i = 0; i < codeCount; i++) {
// 得到随机产生的验证码数字。
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
// 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
// 用随机产生的颜色将验证码绘制到图像中。
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
// 将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
// 将四位数字的验证码保存到Session中,也可以放到request中
HttpSession session = req.getSession();
session.setAttribute("validateCode", randomCode.toString());
// 禁止图像缓存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
}
}
2、ResultServlet.java
package verify;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ResultServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String validateC = (String) request.getSession().getAttribute("validateCode");
String veryCode = request.getParameter("cc");
PrintWriter out = response.getWriter();
if(veryCode==null||"".equals(veryCode)){
out.println("验证码为空");
}else{
if(validateC.equals(veryCode)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.flush();
out.close();
}
}
3、verifyCode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/verifyCode.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<title>test verify code</title>
<style type="text/css">
#infoCode{color:red;font-weight:bold;}
</style>
</head>
<body>
<input id="veryCode" name="veryCode" type="text"/>
<img id="imgObj" alt="" src="../verifyCodeServlet"/>
<a href="#" onclick="changeImg()" >看不清,换一张</a>
<input type="button" value="验证" onclick="checkVerifyCode()"/>
<div id="infoCode"></div>
</body>
</html>
4、verifyCode.js
function changeImg(){
var imgSrc = $("#imgObj");
var src = imgSrc.attr("src");
imgSrc.attr("src",chgUrl(src));
}
//为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳
function chgUrl(url){
var timestamp = (new Date()).valueOf();
url = url + "?tamp=" + timestamp;
return url;
}
function checkVerifyCode(){
var code = $("#veryCode").attr("value");
code = "cc=" + code;
$.ajax({
type:"POST",
url:"../ResultServlet",
data:code,
success:callback
});
}
function callback(data){
alert("callback");
$("#infoCode").html(data);
}
5、web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>VerifyCodeServlet</servlet-name>
<servlet-class>verify.VerifyCodeServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>ResultServlet</servlet-name>
<servlet-class>verify.ResultServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>VerifyCodeServlet</servlet-name>
<url-pattern>/verifyCodeServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ResultServlet</servlet-name>
<url-pattern>/ResultServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
1、VerifyCodeServlet.java
package verify;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class VerifyCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 验证码图片的宽度。
private int width = 140;
// 验证码图片的高度。
private int height = 60;
// 验证码字符个数
private int codeCount = 4;
private int x = 0;
// 字体高度
private int fontHeight;
private int codeY;
//去掉o和0,i和1
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };
/**
* 初始化验证图片属性 ,从web.xml中获得
*/
public void init() throws ServletException {
// 宽度
String sWidth = this.getInitParameter("width");
// 高度
String sHeight = this.getInitParameter("height");
// 字符个数
String sCodeCount = this.getInitParameter("codeCount");
//将配置的信息转换成数值
try {
if (sWidth != null && sWidth.length() != 0) {
width = Integer.parseInt(sWidth);
}
if (sHeight != null && sHeight.length() != 0) {
height = Integer.parseInt(sHeight);
}
if (sCodeCount != null && sCodeCount.length() != 0) {
codeCount = Integer.parseInt(sCodeCount);
}
} catch (NumberFormatException e) {
}
x = width / (codeCount + 1);
fontHeight = height - 2;
codeY = height - 4;
}
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, java.io.IOException {
// 定义图像buffer
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 创建一个随机数生成器类
Random random = new Random();
// 将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 创建字体,字体的大小应该根据图片的高度来定。
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
// 设置字体。
g.setFont(font);
// 画边框。
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
// 随机产生180条干扰线,使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for (int i = 0; i < 180; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// randomCode用于保存随机产生的验证码
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
// 随机产生codeCount数字的验证码。字,字母,颜色都是随机分配的
for (int i = 0; i < codeCount; i++) {
// 得到随机产生的验证码数字。
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
// 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
// 用随机产生的颜色将验证码绘制到图像中。
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
// 将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
// 将四位数字的验证码保存到Session中,也可以放到request中
HttpSession session = req.getSession();
session.setAttribute("validateCode", randomCode.toString());
// 禁止图像缓存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
}
}
2、ResultServlet.java
package verify;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ResultServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String validateC = (String) request.getSession().getAttribute("validateCode");
String veryCode = request.getParameter("cc");
PrintWriter out = response.getWriter();
if(veryCode==null||"".equals(veryCode)){
out.println("验证码为空");
}else{
if(validateC.equals(veryCode)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.flush();
out.close();
}
}
3、verifyCode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/verifyCode.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<title>test verify code</title>
<style type="text/css">
#infoCode{color:red;font-weight:bold;}
</style>
</head>
<body>
<input id="veryCode" name="veryCode" type="text"/>
<img id="imgObj" alt="" src="../verifyCodeServlet"/>
<a href="#" onclick="changeImg()" >看不清,换一张</a>
<input type="button" value="验证" onclick="checkVerifyCode()"/>
<div id="infoCode"></div>
</body>
</html>
4、verifyCode.js
function changeImg(){
var imgSrc = $("#imgObj");
var src = imgSrc.attr("src");
imgSrc.attr("src",chgUrl(src));
}
//为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳
function chgUrl(url){
var timestamp = (new Date()).valueOf();
url = url + "?tamp=" + timestamp;
return url;
}
function checkVerifyCode(){
var code = $("#veryCode").attr("value");
code = "cc=" + code;
$.ajax({
type:"POST",
url:"../ResultServlet",
data:code,
success:callback
});
}
function callback(data){
alert("callback");
$("#infoCode").html(data);
}
5、web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>VerifyCodeServlet</servlet-name>
<servlet-class>verify.VerifyCodeServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>ResultServlet</servlet-name>
<servlet-class>verify.ResultServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>VerifyCodeServlet</servlet-name>
<url-pattern>/verifyCodeServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ResultServlet</servlet-name>
<url-pattern>/ResultServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
发表评论
-
jquery--book--1---eleven
2010-12-13 16:18 874在jquery中, 1、得到email链接: $('a[ ... -
简单的日历组件例子--ten
2010-12-13 13:53 851今天模仿写了一个jquery的日历的例子,感觉不错,至少 ... -
jQuery(function(){ })与(function(){ })(jQuery)的区别
2010-12-10 16:10 820简单理解一下: jQuery(function(){ }); ... -
jquery翻拍效果的例子---eight
2010-12-10 14:32 891今天又学习了一个小例子,不记得在网上哪里下载到的例子了,呵呵, ... -
jquery二级菜单例子--seven
2010-12-09 14:27 1567今天看到了一个jquery二级菜单的例子,就学习了,看 ... -
jquery的几个属性学习--five
2010-12-09 11:21 6811、attr(name): 说明:取得第一个匹配元素的属 ... -
jquery中的方法--我的不断累加--four
2010-12-09 10:35 1595今天了解了jQuery中几个 ... -
jquery——three
2010-12-06 13:32 783css中样式: <div class="wra ... -
jquery——two
2010-12-05 22:40 728【引用】要给所有我们想伪装的链接添加一个class,class ... -
jquery——one
2010-12-02 18:04 801有不对的地方和走偏的 ...
相关推荐
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...
`jquery-migrate-1.2.1.js` 文件是jQuery的一个辅助工具,它主要用于帮助开发者解决在升级到较新版本的jQuery时可能遇到的向后兼容性问题。这个插件的主要目的是为了警告开发者那些在新版本中已经被废弃或者更改的...
这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
`jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**:在默认情况下,HTML `<select>` 元素的功能相对有限。`jquery.editable-select` 提供了一...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...
jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
《jQuery-File-Upload插件深度解析与应用实践》 jQuery-File-Upload是一款功能强大的JavaScript文件上传组件,它提供了一种优雅的方式来处理文件上传,支持多文件选择、进度条显示、图片预览等特性,使得文件上传变...
在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...
<script src="path/to/jquery-migrate-3.0.1.js"> ``` 这里的`path/to`应该替换为实际的文件路径。 **四、迁移策略** 使用jQuery Migrate并不是长久之计,它只是一种过渡手段。开发者应根据控制台的警告信息,...
jquery-migrate-1.2.1.min.js 在网上下载一些 js 插件使用的时候,经常出现这种情况。但是更换低版本 jquery,比如 使用 1.7 版本的 jquery 却不会报错,能正常使用。 经过一番搜索,发现是因为高版本(1.9版本以后)...
jquery-ui-1.10.3.min.js
jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载
jquery-ui-1.10.4.min.js下载
struts2-jquery-plugin-3.1.0.jar
在压缩包内,包含了两个主要文件:`jquery-migrate-3.0.0.js` 和 `jquery-migrate-3.0.0.min.js`。这两个文件分别是未压缩的完整版和压缩后的精简版。未压缩版本方便开发者阅读和调试,而压缩版则用于生产环境,以...