extjs4验证码

最新推荐文章于 2019-11-26 16:36:29 发布

原创最新推荐文章于 2019-11-26 16:36:29 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

struts2 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在ExtJS4中创建和实现验证码功能，包括验证码的生成逻辑和交互处理，帮助开发者增强网站安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建验证码类：

Ext.define('checkCode',{
	extend:'Ext.form.field.Text',
	alias:'widget.checkCode',//定义类的名字
	inputTyle:'codefield',
	isLoader:true,
	codeUrl:Ext.BLANK_IMAGE_URL,
	onRender:function(ct,position)
	{
		this.callParent(arguments);
		this.codeEl=ct.createChild({tag:'img',src:Ext.BLANK_IMAGE_URL});
		this.codeEl.addCls('x-form-code');
		this.codeEl.on('click',this.loadCodeImg,this);
		if(this.isLoader)this.loadCodeImg();
		
	},
	alignErrorIcon:function()
	{
		this.errorIcon.alignTo(this.codeEl,'tl-tr',[2,0]);
	},
	loadCodeImg:function()
	{
		this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
	}
	//使用createChild方法，创建了一个图片，并为其添加了一个名为x-form-code，
	//而后，给其创建了一个click事件，这个事件实现的功能是，当我们点击验证码图片时，换另外一张图片，
	//最后，如果isLoader为True时，调用loadCodeImg方法
});

需要在后台生成验证码图片

package entity;
 
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class checkcode {
	public static String strCode = null;
	public static final char[] CHARS = {'2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};
    public static Random random=new Random();
    
    public static String getRandomString()
    {
    	StringBuffer buffer=new StringBuffer();
    	for(int i=0;i<4;i++)
    	{
    		buffer.append(CHARS[random.nextInt(CHARS.length)]);
    		
    	}
    	strCode=buffer.toString();
    	return strCode;
    }

    public static Color getRandomColor()
    {
    	return new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255));
    }

    public static Color getReverseColor(Color c)
    {
    	return new Color(random.nextInt(255-c.getRed()),random.nextInt(255-c.getGreen()),255-c.getBlue());
    }
    
    public static ByteArrayInputStream createImage()
    {
    	String randomString=getRandomString();
    	int width=80;
    	int height=30;
    	Color color=getRandomColor();
    	Color reverse=getReverseColor(color);
    	BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics2D g=image.createGraphics();
        g.setFont(new Font(Font.SANS_SERIF,Font.BOLD,23));
        g.setColor(color);
        g.fillRect(0, 0, width, height);
        g.setColor(reverse);
        g.drawString(randomString, 5, 23);
        for (int i = 0,n = random.nextInt(100); i < n; i++) {
			g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);
		}
      ByteArrayInputStream bais = convertImageToStream(image);
		
		return bais;
        
    }
    
private static ByteArrayInputStream convertImageToStream(BufferedImage image){
        
        ByteArrayInputStream inputStream = null;
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
        try {
            jpeg.encode(image);
            byte[] bts = bos.toByteArray();
            inputStream = new ByteArrayInputStream(bts);
        } catch (ImageFormatException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return inputStream;
    }

}

action

package action;
import entity.checkcode;
import java.util.Map;
import java.io.ByteArrayInputStream;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;
public class checkcodeAction extends ActionSupport implements SessionAware{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	@Override
	public void setSession(Map<String, Object> arg0) {
		// TODO Auto-generated method stub
		this.session=arg0;
	}
    private ByteArrayInputStream bais;
    public ByteArrayInputStream getBais() {
		return bais;
	}
	public void setBais(ByteArrayInputStream bais) {
		this.bais = bais;
	}
	checkcode code=null;
    String strcode=null;
    private Map session;
    public String getCode()
    {
    	code=new checkcode();
    	bais=code.createImage();
    	strcode=code.strCode;
    	session.put("randomCode", strcode);
    	return SUCCESS;
    	
    }
}

在js中使用

Ext.onReady(function(){
	var checkcode=Ext.create('checkCode',{
		cls:'key',
		fieldLabel:'验证码',
		name:'CheckCode',
		id:'CheckCode',
		isLoader:true,
		blankText:'验证码不能为空',
		codeUrl:'getcode',
		width:150
	});
	
	var form=Ext.create('Ext.form.Panel',{
		x:500,
		y:200,
		frame:true,
		title:'用户登录',
		width:300,
		height:170,
		renderTo:'loginForm',
		buttonAlign:'center',
		fieldDefaults:{
			labelAlign:'left',
			labelWidth:50,
			msgTarget:'side'
			
		},
	   items:[{
		   xtype:'textfield',
		   fieldLabel:'用户名',
		   allowBlank:false,
		   name:'name',
		   blankText:'用户名不能为空'
	   },
	   {
    	   xtype:'textfield',
    	   fieldLabel:'密    码',
    	   name:'password',
    	   inputType:'password',
    	   allowBlank:false,
    	   blankText:'密码不能为空'
       },
       checkcode
       ],
       buttons:[ {text:'登录',
	        	 width:80,
	        	 height:30,
	        	 handler:function()
	        	 {
	        		 var form =this.up('form').getForm();
	        		 if(form.isValid())
	        	     {
	        			 form.submit({
	        				 clientValidation:true,
	        				 waitMsg:'请稍候',
	        				 url:'login',
	        				 success:function(form1,action)
	        				 {
	        					 alert("登录成功");
	        					 window.location.href="/mext/home.jsp"
	        				 },
	        				 failure:function(form1,action)
	        				 {
	        					 alert("登录失败");
	        				 }
	        			 });
	        	     }
	        	 }
	        	 
       },
       {
    	   text:'取消',
    	   width:80,
    	   height:30,
    	   handler:function()
    	   {
    		   var form=this.up('form');
    		   form.close();
    	   }
       }
       
       ]
		
	});
	
});

登陆时需要验证：

package action;
import java.io.ByteArrayInputStream;
import java.util.Map;


import javax.mail.Session;


import entity.checkcode;
 


import org.apache.struts2.interceptor.SessionAware;


import com.opensymphony.xwork2.ActionSupport;
public class loginAction extends ActionSupport implements SessionAware{


	@Override
	public void setSession(Map<String, Object> arg0) {
		// TODO Auto-generated method stub
		this.session=arg0;
	}
	private Map session;
	private boolean success;
	private String name;
	public Map getSession() {
		return session;
	}


	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getCheckCode() {
		return CheckCode;
	}
	public void setCheckCode(String checkCode) {
		CheckCode = checkCode;
	}
	private String password;
	private String CheckCode;
	public String login()
	{
		checkcode code = null;
		String strCode=code.strCode;
		if("admin".equals(name)&&"admin".equals(password)&&CheckCode.toLowerCase().equals(
				strCode.toLowerCase()))
		{
			setSuccess(true);
		}else
		{
			setSuccess(false);
		}
		return SUCCESS;
	}
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}


}