2008年5月15日
效果如图 ：
以下是代码：
login.js 代码如下：
LoginPanel = function() {
var win, f;
var buildForm = function() {
// 构建一个表单面板容器
f = new Ext.form.FormPanel( {
// 给面板的body元素指定自定义的CSS样式信息
bodyStyle : 'padding-top:6px',
// 容器中元素的默认类型
defaultType : 'textfield',
// 标签的默认对齐方式
labelAlign : 'right',
// 指定标签的默认长度
labelWidth : 55,
// 标签与字段录入框之间的空白
labelPad : 0,
// 窗口是否显示背景色
frame : true,
// 容器中组件默认统一配置选项
defaults : {
// 验证字段是否能为空
allowBlank : false,
// 字段宽度
width : 158
},
// 指定容器中的元素
items : [ {
// 给元素添加CSS样式
cls : 'user',
// 元素的名称
name : 'name',
// 指定字段的标签
fieldLabel : '帐号',
// 为空时提示信息
blankText : '帐号不能为空'
}, {
cls : 'key',
name : 'pws',
fieldLabel : '密码',
blankText : '密码不能为空',
inputType : 'password'
},{
name: 'validateCode',
fieldLabel: '验证码',
maxLength: 4,
width: 100,
style: 'font-size:14px;font-weight:bold;letter-spacing: 1px; background:url(validateCode.jsp); background-repeat: no-repeat; background-position: 40px 1px;center right no-repeat;', //validateCode.jsp 是产生验证码的图片的JSP页面
allowBlank:false,
blankText:'验证码不能为空!'
}]
});
};
var buildWin = function() {
// 构建一个窗口面板容器
win = new Ext.Window( {
// 把该面板绑定于wins这个DIV对象上
el : 'wins',
// 窗口面板标题
title : '登陆系统',
// 窗口面板宽度
width : 265,
// 高度
height : 165,
// 该面板布局类型
layout : 'column',
// 面板是否可以关闭及打开
collapsible : true,
//窗体拖拽 默认是TRUE
draggable: false,
defaults : {
// 容器内元素是否显示边框
border : false
},
items : {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
items : f
},
// 面板中按钮的排列方式
buttonAlign : 'left',
// 面板底部的一个或多个按钮对象
buttons : [ {
// 按钮上需显示的文本
text : '登陆',
// 单击按钮时响应的动作
handler : login
}, {
text : '重置',
handler : reset
}, {
text : '注册',
handler : link
}]
});
};
// 单击按钮时执行登陆操作
var login = function(){
if(f.form.isValid()){//验证合法后使用加载进度条
// 执行当前表单面板的submit
f.form.submit( {
// 动作发生期间显示的文本信息
waitMsg : '正在登陆验证,请稍后...',
// submit发生时指向的地址
url : 'test.jsp',
//发送参数
// params:'{name='+f.name+'pws='+f.pws+'}',
// 表单提交方式
method : 'POST',
// 数据验证通过时发生的动作
success : function(form, action) {
if(action.result.msg=='ok'){
window.location.href = 'MyJsp.jsp';
}
},
// 反之
failure : function(form, action) {
reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('登陆失败', action.result.errors.crying);
}
});
}};
// 清空当前表单面板内的数据
var reset = function() {
f.form.reset();
};
// 注册按钮指向的地址
var link = function() {
window.open('reg.jsp', '_blank')
};
return {
init : function() {
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
buildForm();
buildWin();
// 最后把窗口面板显示出来
win.show();
}
}
}();
// 当当前页面DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.
Ext.onReady(LoginPanel.init, LoginPanel);
--------------------------------------------------------------------------
login.jsp如下：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading .loading-indicator{
background:white;
color:#444;
font:bold 20px tahoma,arial,helvetica;
padding:10px;
margin:0;
height:auto;
}
#loading-msg {
font: normal 18px arial,tahoma,sans-serif;
}
</style>
</head>
<body>
<!-- 加载效果 -->
<div id='loading-mask'></div>
<div id="loading">
<div class="loading-indicator">
<img src="ext/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<br/><span id="loading-msg">Loading ...</span>
</div>
</div>
<!-- 加载类库 -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
<!-- 退去加载效果 -->
<script type="text/javascript">
Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
Ext.get('loading-mask').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
</script>
<!-- 登陆界面 -->
<div id='wins'></div>
<!-- -->
</body>
</html>
---------------------------------------------------------------------------
后台测试 页面 test.jsp 如下：
<%@ page language="java" pageEncoding="UTF-8" %>
<%
String name=request.getParameter("name");
String pws=request.getParameter("pws");
String validateCode=request.getParameter("validateCode");//验证码
System.out.println(name+" "+ pws+" "+validateCode+" "+session.getAttribute("rand"));
if("crying".equals(name)&&"123".equals(pws)&&session.getAttribute("rand").equals(validateCode)){
out.println( "{success: true,msg:\'ok\'}");
}else if(!session.getAttribute("rand").equals(validateCode)){
out.println("{ success: false, errors: { crying: \'验证码不正确！\'}}");
}else{
out.println("{ success: false, errors: { crying: \'用户帐号或密码不正确！\'}}");
}
%>
----------------------------------------------
产生验证码图片 validateCode.jsp 如下：
<%@ page language="java" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
contentType="image/jpeg" pageEncoding="UTF-8"%>
<% //设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cahce-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(new Color(160,200,100));
g.fillRect(0,0,width,height);
//设置字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
//随机产生50条干扰线，使图形中的验证码不易被其他的程序探测到
g.setColor(new Color(160,200,200));
for(int i=0;i<50;i++)
{
int x=random.nextInt(width);
int y=random.nextInt(height);
int x1=random.nextInt(width);
int y1=random.nextInt(height);
g.drawLine(x,y,x+x1,y+y1);
}
//随机产生验证码（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.setAttribute("rand",sRand); //////将产生的验证码存储到sesson中
g.dispose();
ImageIO.write(image,"JPEG",response.getOutputStream());
out.clear(); //***********
out=pageContext.pushBody();//**********
%>