EXT带验证码+j2ee后台登陆

最新推荐文章于 2021-02-24 23:11:58 发布

qq283502037

最新推荐文章于 2021-02-24 23:11:58 发布

阅读量126

点赞数

分类专栏： ext 文章标签： EXT CSS JavaScript Ajax HTML ViewUI

ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

qq283502037

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXT带验证码+j2ee后台登陆

废话不多说了，只希望能帮助那些初学EXT的人，本人也是初学者。我上传了例子大家可以下载login.jsp:&lt;%@ page language="java" import="java.util.*" pageEncoding="GB18030"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
复制链接

扫一扫