EXT带验证码+j2ee后台登陆
废话不多说了，只希望能帮助那些初学EXT的人，本人也是初学者。我上传了例子大家可以下载
login.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/examples.css" />
<link rel="stylesheet" type="text/css" href="../css/forms.css" />
<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="../js/test.js"></script>
<title>用户登录</title>
</head>
<body>
<div id="form-ct" >
</div>
</body>
</html>
test.js:
function newcode(){
var verify = document.getElementById('safecode');
verify.setAttribute('src', '/EXT_Demo/RegisterCode?' + Math.random());
}
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var fs = new Ext.FormPanel({
frame: true,
title:'用户登录',
labelAlign: 'right',
collapsible: true,
labelWidth: 85,
width:340,
waitMsgTarget: true,
items: [
new Ext.form.FieldSet({
title: '登录信息',
autoHeight: true,
defaultType: 'textfield',
items: [ {
fieldLabel: '用户帐号',
name: 'username',
minLength: 4,
maxLength: 12,
allowBlank:false,
blankText:'不能为空',
width:190
}, {
fieldLabel: '用户密码',
name: 'pwd',
minLength: 4,
maxLength: 12,
inputType: 'password',
allowBlank:false,
blankText:'不能为空',
width:190
},{
name: 'code',
fieldLabel: '验证码',
maxLength: 5,
minLength: 5,
width: 100,
allowBlank:false,
blankText:'验证码不能为空!'
}]
})
]
});
// simple button add
var reset = fs.addButton(
{
text:'重置',
disabled:false
}
);
// explicit add
var submit = fs.addButton({
text: '提交',
disabled:false,
handler: function(){
if(fs.getForm().isValid()){
Ext.Ajax.request({
//请求地址
url: '/EXT_Demo/CheckLoginServlet',
//提交参数组
params: {
username:Ext.get('username').dom.value,
pwd:Ext.get('pwd').dom.value ,
code:Ext.get('code').dom.value
},
//成功时回调
success: function(response, options) {
var res = response.responseText;
if(res.indexOf("1") != -1){
fs.getForm().getEl().dom.action='/EXT_Demo/LoginServlet';
fs.getForm().getEl().dom.submit();
}else if(res.indexOf("2") != -1){
Ext.Msg.alert('失败','登录失败，请查看验证码是否正确！');
}else{
Ext.Msg.alert('失败','登录失败，请查看帐号或密码是否错误！');
}
}
});
}
}
});
reset.on('click',function(){
fs.getForm().reset();
});
fs.render('form-ct');
var bd = Ext.getDom('code');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{
tag: 'span',
html: '<a href="javascript:newcode();">',
style:'padding-left:20px'
}, {
tag: 'img',
id: 'safecode',
src: '/EXT_Demo/RegisterCode',
align: 'absbottom'
}]);
});