您现在的位置： 365建站网 > 365文章 > extjs 含有验证码的登陆窗口

extjs 含有验证码的登陆窗口

文章来源：365jz.com     点击数：2272    更新时间：2009-09-13 10:33   参与评论

 

js代码如下：

Js代码 复制代码
  1. Ext.QuickTips.init();   
  2. LoginWindow=Ext.extend(Ext.Window,{   
  3. title : '登陆系统',          
  4. width : 265,              
  5. height : 170,          
  6. collapsible : true,   
  7. defaults : {              
  8. border : false  
  9. },   
  10. buttonAlign : 'center',      
  11. createFormPanel :function() {   
  12. return new Ext.form.FormPanel( {   
  13. bodyStyle : 'padding-top:6px',   
  14. defaultType : 'textfield',   
  15. labelAlign : 'right',   
  16. labelWidth : 55,   
  17. labelPad : 0,   
  18. frame : true,   
  19. defaults : {   
  20. allowBlank : false,   
  21. width : 158   
  22. },   
  23. items : [{   
  24. cls : 'user',   
  25. name : 'username',   
  26. fieldLabel : '帐号',   
  27. blankText : '帐号不能为空'  
  28. }, {   
  29. cls : 'key',   
  30. name : 'password',   
  31. fieldLabel : '密码',   
  32. blankText : '密码不能为空',   
  33. inputType : 'password'  
  34. }, {   
  35. cls : 'key',   
  36. name:'randCode',   
  37. id:'randCode',   
  38. fieldLabel:'验证码',   
  39. width:80,   
  40. blankText : '验证码不能为空'  
  41. }]   
  42. });   
  43. },                      
  44. login:function() {   
  45. this.fp.form.submit({   
  46. waitMsg : '正在登录......',   
  47. url : 'login.ejf?cmd=login',   
  48. success : function(form, action) {   
  49. window.location.href = 'manage.ejf';   
  50. },   
  51. failure : function(form, action) {   
  52. form.reset();   
  53. if (action.failureType == Ext.form.Action.SERVER_INVALID)   
  54. Ext.MessageBox.alert('警告', action.result.errors.msg);   
  55. }   
  56. });   
  57. },   
  58. initComponent : function(){   
  59.   
  60. LoginWindow.superclass.initComponent.call(this);         
  61. this.fp=this.createFormPanel();   
  62. this.add(this.fp);   
  63. this.addButton('登陆',this.login,this);   
  64. this.addButton('重置', function(){this.fp.form.reset();},this);   
  65.   
  66. }       
  67. });   
  68.   
  69. Ext.onReady(function()   
  70. {   
  71. var win=new LoginWindow();   
  72.   
  73. win.show();   
  74. var bd = Ext.getDom('randCode');     
  75. var bd2 = Ext.get(bd.parentNode);    
  76. bd2.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'});    
  77. }   
  78. );  

 css如下

Css代码 复制代码
  1. .user{ background:url(images/user.gif) no-repeat 1px 2px; }   
  2. .key{ background:url(images/key.gif) no-repeat 1px 2px;  }   
  3. .rand{ background:url(images/rand.gif) no-repeat 1px 2px;  }   
  4. .key,.user,.rand{   
  5. background-color:#FFFFFF;   
  6. padding-left:20px;   
  7. font-weight:bold;   
  8. color:#000033;   
  9. }  

 image.jsp

Java代码 复制代码
  1. <%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>   
  2. <%!   
  3. Color getRandColor(int fc,int bc){//给定范围获得随机颜色   
  4. Random random = new Random();   
  5. if(fc>255) fc=255;   
  6. if(bc>255) bc=255;   
  7. int r=fc+random.nextInt(bc-fc);   
  8. int g=fc+random.nextInt(bc-fc);   
  9. int b=fc+random.nextInt(bc-fc);   
  10. return new Color(r,g,b);   
  11. }   
  12. %>   
  13. <%   
  14. //设置页面不缓存   
  15. response.setHeader("Pragma","No-cache");   
  16. response.setHeader("Cache-Control","no-cache");   
  17. response.setDateHeader("Expires", 0);   
  18.   
  19. // 在内存中创建图象   
  20. int width=60, height=20;   
  21. BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);   
  22.   
  23. // 获取图形上下文   
  24. Graphics g = image.getGraphics();   
  25.   
  26. //生成随机类   
  27. Random random = new Random();   
  28.   
  29. // 设定背景色   
  30. g.setColor(getRandColor(200,250));   
  31. g.fillRect(0, 0, width, height);   
  32.   
  33. //设定字体   
  34. g.setFont(new Font("Times New Roman",Font.PLAIN,18));   
  35.   
  36. //画边框   
  37. //g.setColor(new Color());   
  38. //g.drawRect(0,0,width-1,height-1);   
  39.   
  40. // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到   
  41. g.setColor(getRandColor(160,200));   
  42. for (int i=0;i<155;i++)   
  43. {   
  44. int x = random.nextInt(width);   
  45. int y = random.nextInt(height);   
  46. int xl = random.nextInt(12);   
  47. int yl = random.nextInt(12);   
  48. g.drawLine(x,y,x+xl,y+yl);   
  49. }   
  50.   
  51. // 取随机产生的认证码(4位数字)   
  52. String sRand="";   
  53. for (int i=0;i<4;i++){   
  54. String rand=String.valueOf(random.nextInt(10));   
  55. sRand+=rand;   
  56. // 将认证码显示到图象中   
  57. g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成   
  58. g.drawString(rand,13*i+6,16);   
  59. }   
  60.   
  61. // 将认证码存入SESSION   
  62. session.setAttribute("rand",sRand);   
  63.   
  64. // 图象生效   
  65. g.dispose();   
  66. OutputStream output=response.getOutputStream();   
  67.   
  68. // 输出图象到页面   
  69. ImageIO.write(image, "JPEG", response.getOutputStream());   
  70. output.flush();   
  71. out.clear();   
  72. out = pageContext.pushBody();   
  73.   
  74. %>  

 

调用很简单代码如下

Js代码 复制代码
  1. Ext.onReady(function(){                
  2. var w = new LoginWin();   
  3. w.show();      
  4. var bd = Ext.getDom('randCode');     
  5. var bd2 = Ext.get(bd.parentNode);    
  6. bd2.createChild([{tag:'span',html:'     '},{tag: 'img', src: 'image.jsp',align:'absbottom'}]);                                 
  7. });  

 

 

效果如下

效果图

 

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (2272人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号