创建验证码类:
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;
}
}