`
duckwang
  • 浏览: 2794 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

JQuery验证码demo

阅读更多
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 GeneratedCode extends HttpServlet{

/**
*

* Description:[字段功能描述]
*

*/
private static final long serialVersionUID = -7397896919437870619L;

// 验证码图片的宽度。
private int width = 70;

// 验证码图片的高度。
private int height = 20;

// 验证码字符个数
private int codeCount = 4;

private int x = 0;

// 字体高度
private int fontHeight;

private int codeY;

private char[] codeSequence = { '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', '0', '1', '2', '3', '4', '5', '6', '7',
'8', '9' };

protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, java.io.IOException {

x = width / (codeCount + 1);
fontHeight = height - 2;
codeY = height - 4;

// 定义图像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);

// 随机产生10条干扰线,使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for (int i = 0; i < 15; 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(36)]);
// 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
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 - 5, codeY);

// 将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
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 outPut = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", outPut);
outPut.close();

}

//	public static void main(String[] args){
//
//	 HttpSession session = null;
//
//	 // 验证码个数
//	 int codeCount = 6;
//
//	 // 验证码图片的宽度。
//	 int width = 150;
//
//	 // 验证码图片的高度。
//	 int height = 30;
//
//	 GeneratedCode tespic = new GeneratedCode();
//
//	 String picStr = tespic.getCertPic( session, codeCount, width, height);
//
//	 try {
//
//	 File outFile = new File("e:\\1.bmp");
//	 FileOutputStream fos = new FileOutputStream(outFile);
//	 fos.write(Base64.decode(picStr));
//	 fos.close();
//
//	 } catch (Exception e) {
//
//	 e.printStackTrace();
//	 }
//
//
//	}
}


 




//改变验证码图片
function changeImg(){
var imgSrc = jQuery("#validateimg");
var src = imgSrc.attr("src");
imgSrc.attr("src",chgUrl(src));
}
//时间戳
//为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳
function chgUrl(url){
var timestamp = (new Date()).valueOf();
url = url.substring(0,15);
if((url.indexOf("&")>=0)){
url = url + "×tamp=" + timestamp;
}else{
url = url + "?timestamp=" + timestamp;
}
return url;
}
function validate(){

var codeValue=jQuery("#validatecode").val();
jQuery.post('<%=request.getContextPath()%>/login.htm',{validatecode:validatecode},
function(data){
if ("true"==data) {
return true;
}else{
return false;
}
})//end

}
分享到:
评论

相关推荐

    验证码Demo (Jquery实现提交)

    验证码在IT行业中是一种常见...通过以上步骤,我们可以看到一个基于Jquery实现的验证码Demo涵盖了服务器生成验证码、前端展示、用户交互验证等多个环节。学习并理解这些知识点对于开发具有安全保障的Web应用至关重要。

    jQuery验证码随机数字运算代码

    jQuery验证码随机数字运算代码是为网页应用设计的一种动态验证码解决方案,它结合了jQuery库的灵活性和高效性,以及数学运算的随机性和不可预测性,以增强验证码的安全性。 首先,jQuery是一个轻量级的JavaScript库...

    php验证码生成(原生,自带演示demo)

    `jquery.js`是一个JavaScript库,可能用来处理用户输入的验证,比如在用户输入验证码时实时检查其正确性,或者在提交表单前验证验证码。 `Validate.php`可能是后端验证验证码的脚本。当用户提交表单时,服务器会...

    jQuery三级城市联动带手机验证码表单验证

    在这个“jQuery三级城市联动带手机验证码表单验证”的示例中,我们将深入探讨如何利用jQuery实现一系列功能,包括三级城市选择的联动效果、手机验证码的验证以及整个表单的验证流程。 首先,`jQuery`是一个广泛使用...

    jQuery手机移动端注册表单验证代码

    5. **验证码验证**:验证码通常用于防止机器人或恶意攻击,此处的验证可能涉及到与服务器的交互,确保用户输入的验证码与服务器发送的验证码一致。 6. **邮箱验证**:邮箱验证会利用正则表达式来确认输入的字符串...

    数字验证码2

    数字验证码的demo,该demo需要引入jQuery,相比于我的另一篇,该页面更简洁

    jquery登录界面案例

    通过调用第三方API,可以使用jQuery显示和处理验证码图片的加载及验证过程。 10. **用户体验优化** 最后,确保登录按钮的禁用状态(`.prop('disabled', true)`)在等待服务器响应时被正确设置,防止用户重复点击,...

    基于SSH + jquery easyui 的一个通讯录Demo

    **SSH + jQuery EasyUI 通讯录Demo详解** SSH(Struts2、Spring、Hibernate)是一个经典的Java Web开发框架,常用于构建高效、可扩展的企业级应用程序。jQuery EasyUI 是一个基于jQuery的前端UI库,提供了丰富的...

    手机验证码h5页面附带验证

    2. **发送验证码**:用户点击“获取验证码”按钮,jQuery会触发一个AJAX请求到服务器,请求发送验证码到用户的手机。 3. **服务器发送验证码**:后端服务器接收到请求后,通过短信服务提供商发送验证码到指定的手机...

    4位图形验证码.html

    需要添加正确路径的jquery,内容为随机生成4位验证码,包含字母大小写,数字,颜色等信息,一个简单的demo,仅供参考。

    网易易盾的使用demo

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和AJAX交互,使得开发者能更方便地在网页中实现易盾验证码的功能。 `jquery-2.0.3.min.js`是jQuery的精简版,用于优化加载速度和减少文件大小。在`...

    jQuery虚拟键盘.zip

    插件描述:jQuery虚拟键盘带中文拼音输入内有实际DEMO 加载了CSS和JS后在DIV ID=dvkeybord中加载PREVIOUS: NEXT: js图形验证码插件 jQuery自动定位当地天气预报 ...

    基于ThinkPHP5图书管理系统demo源码 DemoLibraryBasedThinkPHP5.rar

    基于ThinkPHP5图书管理系统demo源码 一、源码描述 程序后台技术框架:ThinkPHP5(一个MVC框架),后台界面采用EasyUI框架,前台界面采用Bootstrap框架,用户浏览器和服务器全程几乎采用jquery异步加载技术! 二、...

    vue中使用极验验证码的方法(附demo)

    在Vue.js应用中集成极验验证码(Geetest)是一项常见的安全功能,用于增强用户登录或注册过程中的安全性,防止恶意机器人或自动脚本的攻击。极验验证码通过交互式的验证方式,提供了一种较为人性化的验证体验。下面...

    jquery-qrcode-master.zip

    在提供的"jquery-qrcode-master"压缩包中,通常会包含一个`demo`文件夹,内含一个简单的HTML页面,展示了如何使用jQuery QRCode。通过查看和运行这个DEMO,你可以直观地了解库的实际效果,并参考其代码结构。 五、...

    基于Javascript的行为验证码AJ-Captcha设计源码

    本源码提供了一个基于Javascript的行为验证码AJ-Captcha设计。项目包含1645个文件,其中包括343个PNG图片、241个PHP文件、139个Swift文件、93个JavaScript文件、88个H文件、80个M文件、72个XML文件、69个Java文件、...

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    ]4种漂亮的CSS3鼠标拖动滑块样式代码15个漂亮的css3单选按钮美化动画代码]5款漂亮的jQuery拖动滑块选值特效5款实用的jQuery验证码插件 5种css3鼠标滑过图片文字动画代码 5组简洁漂亮的CSS3鼠标Hover按钮动画特效6款...

    Chrome抢票小插件demo

    Chrome抢票小插件demo是一种基于谷歌浏览器(Chrome)的扩展程序,用于帮助用户提高抢购火车票或其他有限...开发者可以根据这个demo的思路,结合具体需求,如添加验证码识别、智能填表等功能,开发出更完善的抢票插件。

    PHP生成各种随机验证码的方法总结【附demo源码】

    在Web开发中,验证码是一种广泛使用的安全机制,用于防止...在实际应用中,可以结合前端框架和库,如jQuery,进一步优化用户体验。记得在生成验证码后,要清除Session中的旧验证码,确保每次验证都基于最新的验证码。

    jQuery移动端注册登录页面模板.zip

    这个“jQuery移动端注册登录页面模板”提供了一整套完整的解决方案,帮助开发者快速构建功能完善的移动界面。以下是这个模板中包含的关键知识点: 1. **jQuery库**:jQuery是一个广泛使用的JavaScript库,它简化了...

Global site tag (gtag.js) - Google Analytics