java中在Ext环境中实现带验证码的登陆窗口

效果图如下所示：

一、主要js代码：

Ext.QuickTips.init(); 
 LoginWindow=Ext.extend(Ext.Window,{ 
 title : '登陆系统', 
 width : 265, 
 height : 170, 
 collapsible : true, 
 defaults : { 
 border : false 
 }, 
 buttonAlign : 'center', 
 createFormPanel :function() { 
 return new Ext.form.FormPanel( { 
 bodyStyle : 'padding-top:6px', 
 defaultType : 'textfield', 
 labelAlign : 'right', 
 labelWidth : 55, 
 labelPad : 0, 
 frame : true, 
 defaults : { 
 allowBlank : false, 
 width : 158 
 }, 
 items : [{ 
 cls : 'user', 
 name : 'username', 
 fieldLabel : '帐号', 
 blankText : '帐号不能为空' 
 }, { 
 cls : 'key', 
 name : 'password', 
 fieldLabel : '密码', 
 blankText : '密码不能为空', 
 inputType : 'password' 
 }, { 
 cls : 'key', 
 name:'randCode', 
 id:'randCode', 
 fieldLabel:'验证码', 
 width:80, 
 blankText : '验证码不能为空' 
 }] 
 }); 
 }, 
 login:function() { 
 this.fp.form.submit({ 
 waitMsg : '正在登录......', 
 url : 'login.ejf?cmd=login', 
 success : function(form, action) { 
 window.location.href = 'manage.ejf'; 
 }, 
 failure : function(form, action) { 
 form.reset(); 
if (action.failureType == Ext.form.Action.SERVER_INVALID) 
 Ext.MessageBox.alert('警告', action.result.errors.msg); 
 } 
 }); 
 }, 
 initComponent : function(){ 

 LoginWindow.superclass.initComponent.call(this); 
 this.fp=this.createFormPanel(); 
 this.add(this.fp); 
 this.addButton('登陆',this.login,this); 
 this.addButton('重置', function(){this.fp.form.reset();},this); 
 
 } 
 }); 
 
 Ext.onReady(function() 
 { 
 var win=new LoginWindow(); 

 win.show(); 
 var bd = Ext.getDom('randCode'); 
 var bd2 = Ext.get(bd.parentNode); 
 bd2.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'}); 
 } 
 ); 

二、主要css代码：

.user{ background:url(images/user.gif) no-repeat 1px 2px; } 
.key{ background:url(images/key.gif) no-repeat 1px 2px; } 
.rand{ background:url(images/rand.gif) no-repeat 1px 2px; } 
.key,.user,.rand{ 
background-color:#FFFFFF; 
padding-left:20px; 
font-weight:bold; 
color:#000033; 
} 

三、 image.jsp代码：

<%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>  
<%!  
Color getRandColor(int fc,int bc){//给定范围获得随机颜色  
Random random = new Random();  
if(fc>255) fc=255;  
if(bc>255) bc=255;  
int r=fc+random.nextInt(bc-fc);  
int g=fc+random.nextInt(bc-fc);  
int b=fc+random.nextInt(bc-fc);  
return new Color(r,g,b);  
}  
%>  
<%  
//设置页面不缓存  
response.setHeader("Pragma","No-cache");  
response.setHeader("Cache-Control","no-cache");  
response.setDateHeader("Expires", 0);  

// 在内存中创建图象  
int width=60, height=20;  
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);  

// 获取图形上下文  
Graphics g = image.getGraphics();  

//生成随机类  
Random random = new Random();  

// 设定背景色  
g.setColor(getRandColor(200,250));  
g.fillRect(0, 0, width, height);  

//设定字体  
g.setFont(new Font("Times New Roman",Font.PLAIN,18));  

//画边框  
//g.setColor(new Color());  
//g.drawRect(0,0,width-1,height-1);  

// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到  
g.setColor(getRandColor(160,200));  
for (int i=0;i<155;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);  
}  

// 取随机产生的认证码(4位数字)  
String sRand="";  
for (int i=0;i<4;i++){  
String rand=String.valueOf(random.nextInt(10));  
sRand+=rand;  
// 将认证码显示到图象中  
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成  
g.drawString(rand,13*i+6,16);  
}  

// 将认证码存入SESSION  
session.setAttribute("rand",sRand);  

// 图象生效  
g.dispose();  
OutputStream output=response.getOutputStream();  

// 输出图象到页面  
ImageIO.write(image, "JPEG", response.getOutputStream());  
output.flush();  
out.clear();  
out = pageContext.pushBody();  

%>  

四、页面中弹出登陆框：

Ext.onReady(function(){
var w = new LoginWin();
w.show();
var bd = Ext.getDom('randCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{tag:'span',html:'    '},{tag: 'img', src: 'image.jsp',align:'absbottom'}]);
});