EXT带验证码+j2ee后台登陆

Cindy_Lee

浏览: 112047 次
性别:
来自: 武汉人在北京

最近访客更多访客>>

84339601

次一一

汤姆克鲁斯猫

zhangyang123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS JavaScript Ajax HTML

废话不多说了，只希望能帮助那些初学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'
    }]);
});

EXT_Demo.rar (2 MB)
下载次数: 1003

分享到：

漂亮的Ext desktop | ajax分页

2009-03-06 15:13
浏览 1443
评论(4)
论坛回复 / 浏览 (4 / 4423)
分类:Web前端
查看更多

4 楼 zhangzhimin2008 2009-11-16

怎么没有sql？

3 楼 Cindy_Lee 2009-03-08

duronshi 写道

如果页面有n个值， url: '/EXT_Demo/CheckLoginServlet',                          //提交参数组                         params: {                             username:Ext.get('username').dom.value,                             pwd:Ext.get('pwd').dom.value ,                            code:Ext.get('code').dom.value                         },  是不是要在params里加多个？

是的。。

2 楼 duronshi 2009-03-07

如果页面有n个值，
url: '/EXT_Demo/CheckLoginServlet',
                        //提交参数组
                       params: {
                           username:Ext.get('username').dom.value,
                           pwd:Ext.get('pwd').dom.value ,
                           code:Ext.get('code').dom.value
                       },
是不是要在params里加多个？

1 楼 qq19772004 2009-03-07

还行....

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论