效果图: 使用Ext来登陆的javascript /* * 创建登陆窗体 * param String ctx 工程路径 */ function createLoginWin(ctx){ Ext.QuickTips.init(); //创建表单 var myform=new Ext.form.FormPanel({ bodyStyle:"padding-top:30px;padding-left:42px", frame:true, region:"center", width:"100%", labelAlign:"right", defaultType:"textfield", defaults:{allowBlank:false}, items:[ //添加表单控件,一个文本框,密码框,验证码框 {cls:"user",name:"username", fieldLabel:"帐 号", blankText:"帐号不能为空"}, {cls:"key",name:"password", fieldLabel:"密 码", blankText:"密码不能为空", inputType:"password"}, {cls:"rand",name:"code", id:"code", fieldLabel:"验证码", width:90, blankText:"验证码不能为空"} ] }); //创建Ext窗体 var win=new Ext.Window({ layout:"border", title:"AMSS登陆", width:400, height:250, collapsible:true, items: [myform]//将表单放置在窗体上 }); //登陆按扭定义的事件,当点登陆将触发该事件 login=function(){ if(Ext.getDom("username").value==''){ Ext.MessageBox.alert("警告", "帐号信息不允许为空,无法登陆!"); return; } if(Ext.getDom("password").value==''){ Ext.MessageBox.alert("警告", "密码信息不允许为空,无法登陆!"); return; } if(Ext.getDom("code").value==''){ Ext.MessageBox.alert("警告", "验证码信息不允许为空,无法登陆!"); return; } myform.form.submit({//表单提交 waitMsg:"正在登陆......", url:ctx+"/login.do", success:function (form, action) { //登陆成功,显示数据载入条 Ext.MessageBox.show({ title: '登陆成功', msg: '数据载入中...', width:300, progress:true, closable:false }); window.location= ctx+"/manager/main.jsp"; }, failure:function (form, action) { form.reset();//登陆失败表单重置 Ext.MessageBox.alert("警告", action.result.info); //登陆失败也更换下验证码 document.getElementById('des1').src="code.jsp?code="+Math.random(); } }); }; myform.addButton("登陆",login);//按扭添加监听事件 myform.addButton("重置",function(){myform.form.reset()});//添加表单重置事件 win.show();//窗体显示 var Code = Ext.getDom("code"); var CodeNode = Ext.get(Code.parentNode); //创建验证码区域 CodeNode.createChild({ id:"des1", tag:"img", src:ctx+"/code.jsp", align:"absbottom", style:"cursor: hand", qtip:"点击重新获得验证码。" }); //设置验证码图片点击时更换验证码 Ext.get('des1').on('click', function(e){ document.getElementById('des1').src=ctx+"/code.jsp?code="+Math.random(); }); } 在登陆的jsp页面负责调用javascript中定义的封装函数 <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>AMSS系统管理登陆</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="<%=path %>/ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="<%=path %>/css/login.css" /> <script type="text/javascript" src="<%=path %>/ext/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="<%=path %>/ext/ext-all.js"> </script> <script type="text/javascript" src="<%=path %>/ext/loginsso.js"></script> <script type="text/javascript"> Ext.onReady(function () { createLoginWin('<%=path%>'); }); </script> </head> <body bgcolor="#DFE8F6"> </body> </html> 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; } .mycon{ background:url(../images/ico_04.gif) 0 6px no-repeat !important; } 验证码的jsp就不提供了,随便一搜一大把 下章将发Ext树代码