2008年5月15日
效果如圖 ：
以下是代碼：
login.js 代碼如下：
LoginPanel = function() {
var win, f;
var buildForm = function() {
// 構(gòu)建一個(gè)表單面板容器
f = new Ext.form.FormPanel( {
// 給面板的body元素指定自定義的CSS樣式信息
bodyStyle : 'padding-top:6px',
// 容器中元素的默認(rèn)類型
defaultType : 'textfield',
// 標(biāo)簽的默認(rèn)對(duì)齊方式
labelAlign : 'right',
// 指定標(biāo)簽的默認(rèn)長(zhǎng)度
labelWidth : 55,
// 標(biāo)簽與字段錄入框之間的空白
labelPad : 0,
// 窗口是否顯示背景色
frame : true,
// 容器中組件默認(rèn)統(tǒng)一配置選項(xiàng)
defaults : {
// 驗(yàn)證字段是否能為空
allowBlank : false,
// 字段寬度
width : 158
},
// 指定容器中的元素
items : [ {
// 給元素添加CSS樣式
cls : 'user',
// 元素的名稱
name : 'name',
// 指定字段的標(biāo)簽
fieldLabel : '帳號(hào)',
// 為空時(shí)提示信息
blankText : '帳號(hào)不能為空'
}, {
cls : 'key',
name : 'pws',
fieldLabel : '密碼',
blankText : '密碼不能為空',
inputType : 'password'
},{
name: 'validateCode',
fieldLabel: '驗(yàn)證碼',
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 是產(chǎn)生驗(yàn)證碼的圖片的JSP頁(yè)面
allowBlank:false,
blankText:'驗(yàn)證碼不能為空!'
}]
});
};
var buildWin = function() {
// 構(gòu)建一個(gè)窗口面板容器
win = new Ext.Window( {
// 把該面板綁定于wins這個(gè)DIV對(duì)象上
el : 'wins',
// 窗口面板標(biāo)題
title : '登陸系統(tǒng)',
// 窗口面板寬度
width : 265,
// 高度
height : 165,
// 該面板布局類型
layout : 'column',
// 面板是否可以關(guān)閉及打開(kāi)
collapsible : true,
//窗體拖拽 默認(rèn)是TRUE
draggable: false,
defaults : {
// 容器內(nèi)元素是否顯示邊框
border : false
},
items : {
// 指定內(nèi)部元素所占寬度1表示100% .5表示50%
columnWidth : 1,
// 把表單面板容器增加入其中,使之成為窗口面板容器的子容器
items : f
},
// 面板中按鈕的排列方式
buttonAlign : 'left',
// 面板底部的一個(gè)或多個(gè)按鈕對(duì)象
buttons : [ {
// 按鈕上需顯示的文本
text : '登陸',
// 單擊按鈕時(shí)響應(yīng)的動(dòng)作
handler : login
}, {
text : '重置',
handler : reset
}, {
text : '注冊(cè)',
handler : link
}]
});
};
// 單擊按鈕時(shí)執(zhí)行登陸操作
var login = function(){
if(f.form.isValid()){//驗(yàn)證合法后使用加載進(jìn)度條
// 執(zhí)行當(dāng)前表單面板的submit
f.form.submit( {
// 動(dòng)作發(fā)生期間顯示的文本信息
waitMsg : '正在登陸驗(yàn)證,請(qǐng)稍后...',
// submit發(fā)生時(shí)指向的地址
url : 'test.jsp',
//發(fā)送參數(shù)
// params:'{name='+f.name+'pws='+f.pws+'}',
// 表單提交方式
method : 'POST',
// 數(shù)據(jù)驗(yàn)證通過(guò)時(shí)發(fā)生的動(dòng)作
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);
}
});
}};
// 清空當(dāng)前表單面板內(nèi)的數(shù)據(jù)
var reset = function() {
f.form.reset();
};
// 注冊(cè)按鈕指向的地址
var link = function() {
window.open('reg.jsp', '_blank')
};
return {
init : function() {
//使用表單提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
buildForm();
buildWin();
// 最后把窗口面板顯示出來(lái)
win.show();
}
}
}();
// 當(dāng)當(dāng)前頁(yè)面DOM加載完畢后,在LoginPanel作用域內(nèi)執(zhí)行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>
<!-- 加載類庫(kù) -->
<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>
---------------------------------------------------------------------------
后臺(tái)測(cè)試 頁(yè)面 test.jsp 如下：
<%@ page language="java" pageEncoding="UTF-8" %>
<%
String name=request.getParameter("name");
String pws=request.getParameter("pws");
String validateCode=request.getParameter("validateCode");//驗(yàn)證碼
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: \'驗(yàn)證碼不正確！\'}}");
}else{
out.println("{ success: false, errors: { crying: \'用戶帳號(hào)或密碼不正確！\'}}");
}
%>
----------------------------------------------
產(chǎn)生驗(yàn)證碼圖片 validateCode.jsp 如下：
<%@ page language="java" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
contentType="image/jpeg" pageEncoding="UTF-8"%>
<% //設(shè)置頁(yè)面不緩存
response.setHeader("Pragma","No-cache");
response.setHeader("Cahce-Control","no-cache");
response.setDateHeader("Expires",0);
//在內(nèi)存中創(chuàng)建圖片
int width=60,height=20;
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//獲取圖形上下文
Graphics g= image.getGraphics();
//生成隨機(jī)類
Random random= new Random();
//設(shè)置背景顏色
g.setColor(new Color(160,200,100));
g.fillRect(0,0,width,height);
//設(shè)置字體
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
//隨機(jī)產(chǎn)生50條干擾線，使圖形中的驗(yàn)證碼不易被其他的程序探測(cè)到
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);
}
//隨機(jī)產(chǎn)生驗(yàn)證碼（4為數(shù)字）
String sRand="";
for(int i=0;i<4;i++)
{
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
//將驗(yàn)證碼顯示到圖象
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); //////將產(chǎn)生的驗(yàn)證碼存儲(chǔ)到sesson中
g.dispose();
ImageIO.write(image,"JPEG",response.getOutputStream());
out.clear(); //***********
out=pageContext.pushBody();//**********
%>