`

Ext带验证码登录框可刷新验证码

阅读更多
js代码

程序代码
// @filename   login_panel.js
// @version    0.1
// @author     jayboy
// @contact    115519889@qq.com
// @update     2008-11-16
// @comment    jayboy.Cn
function reloadcode(){//刷新验证码函数
    var verify = document.getElementById('safecode');
    verify.setAttribute('src', 'chknumber.php?' + Math.random());
}

Ext.onReady(function(){
    var select_status = new Ext.data.JsonStore({
        url: "./js/_status.js",
        fields: ['name', 'value'],
        totalProperty: "total",
        root: "result",
        id: "name"
    });
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var login = new Ext.FormPanel({
        id: 'login',
        name: 'login',
        labelWidth: 60,
        baseCls: 'x-plain',
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        border: false,
        defaults: {
            width: 230
        },
        defaultType: 'textfield',//默认字段类型
        items: [{
            fieldLabel: '用户名',
            name: 'username',
            allowBlank: false,//禁止为空
            blankText: '用户名不能为空,学生输入学号'
        }, {
            fieldLabel: '密码',
            name: 'userpass',
            inputType: 'password',
            allowBlank: false,//禁止为空
            blankText: '密码不能为空'//可限制多种类型,具体参照api文档
        }, {
            xtype: 'combo',
            name: 'status',
            fieldLabel: '登录身份',
            displayField: 'name',
            valueField: 'value',
            store: select_status,
            triggerAction: 'all',
            emptyText: '学生',
            selectOnFocus: true,
            editable: false
        }, {
            cls: 'key',
            name: 'chknumber',
            id: 'randCode',
            fieldLabel: '验证码',
            maxLength: 4,
            width: 80,
            allowBlank: false,
            blankText: '验证码不能为空!'
        }],
        keys: {
            key: 13,
            fn: submit_login
        },
        buttons: [{
            text: '登录',
            handler: submit_login
        }, {
            text: '取消',
            handler: function(){
                login.form.reset();
            }//重置表单
        }]
    });
   
    function submit_login(){
        if (win.getComponent('login').form.isValid()) {
            win.getComponent('login').form.submit({
                url: 'login_chk.php',
                waitTitle: '提示',
                method: 'POST',
                waitMsg: '正在登录验证,请稍候...',
                success: function(form, action){
                    var loginResult = action.result.success;
                    if (loginResult == false) {
                        Ext.MessageBox.alert('提示', action.result.message);
                    }
                    else
                        if (loginResult == true) {
                            Ext.MessageBox.alert('提示', action.result.message);
                            window.location.href = 'main.php';
                        }
                },
                failure: function(form, action){
                    Ext.MessageBox.alert('提示', action.result.message);
                    win.getComponent('login').form.reset();
                   
                }
            });
        }
    }
    win = new Ext.Window({
        id: 'win',
        title: '登陆',
        layout: 'fit',
        width: 360,
        height: 200,
        bodyStyle: 'padding:5px;',
        maximizable: false,
        closeAction: 'close',
        closable: false,
        collapsible: true,
        plain: true,
        buttonAlign: 'center',
        items: login
    });
    win.show();
    var bd = Ext.getDom('randCode');
    var bd2 = Ext.get(bd.parentNode);
    bd2.createChild([{
        tag: 'span',
        html: '     <a href="javascript:reloadcode();">'
    }, {
        tag: 'img',
        id: 'safecode',
        src: 'chknumber.php',
        align: 'absbottom'
    }, {
        tag: 'span',
        html: '</a>  <b>点击图片可刷新</b>'
    }]);
});

程序代码
<?
//checkNum.php

  Function   getRandNumber   ($fMin,   $fMax)   {  
    srand((double)microtime()*1000000);
    $fLen   =   "%0 ".strlen($fMax). "d ";
    Return   sprintf($fLen,   rand($fMin,$fMax));
  }  
$str=getRandNumber(1000,9999);
setcookie("code",$str);



//function images($str){
//$str=random(4); //随机生成的字符串

$width = 50; //验证码图片的宽度
$height = 22; //验证码图片的高度
@header("Content-Type:image/png");
//$_SESSION["code"] = $str;
//echo $str;
$im=imagecreate($width,$height);
//背景色
$back=imagecolorallocate($im,0xFF,0xFF,0xFF);
//模糊点颜色
$pix=imagecolorallocate($im,187,230,247);
//字体色
$font=imagecolorallocate($im,41,163,238);
//绘模糊作用的点
mt_srand();
for($i=0;$i<1000;$i++)
{
imagesetpixel($im,mt_rand(0,$width),mt_rand(0,$height),$pix);
}
imagestring($im, 5, 7, 3,$str, $font);
imagerectangle($im,0,0,$width-1,$height-1,$font);
imagepng($im);
imagedestroy($im);
//$_SESSION["code"] = $str;

//}

?>

  • 大小: 48.9 KB
分享到:
评论

相关推荐

    Ext3.0 实现验证码

    在Web应用中,验证码通常用于注册、登录、评论等场景,以防止自动化脚本批量发送垃圾信息或进行其他非法活动。 在Ext3.0中实现验证码,首先需要创建一个显示验证码的组件。这个组件可能是一个包含图片和输入框的...

    Ext实现验证码的关键代码

    // 刷新验证码的逻辑,例如重新加载图片URL或请求新的验证码 } }); // 将刷新按钮添加到视图 captchaContainer.add(refreshButton); ``` 以上就是使用Ext实现验证码功能的基本步骤。当然,实际项目中可能...

    Extjs4登录功能+验证码+struts2

    在"Extjs4登录功能+验证码+struts2"这个主题中,我们将深入探讨如何利用ExtJS4构建一个带有验证码功能的登录界面,并结合Struts2后端框架实现数据验证和处理。 首先,登录功能是Web应用的基础部分,通常包含用户名...

    ext4.1登陆界面

    4. **Ajax交互**:当用户点击登录按钮时,EXTJS4通常会使用Ajax技术异步提交表单,这样不会刷新整个页面,提升了用户体验。 5. **服务器端验证**:`login.jsp`处理这些Ajax请求,验证用户名和密码的正确性。这通常...

    extjs实现登陆验证

    5. **动态生成验证码图片**:在登录界面中,通过JavaScript动态插入验证码图片,确保每次刷新界面时,验证码都会更新,增强安全性。 #### 详细步骤与代码分析 1. **创建登录窗口实例**:在`onReady`事件处理器中,...

    asp.net+ext上传图片并显示

    在上传图片的场景中,EXT的FileField组件可以用于选择本地文件,FormPanel可以封装整个上传表单,而Ajax提交方式可以实现异步上传,无需页面刷新。 3. **上传图片的流程**: - 用户在EXT前端选择图片文件,EXT的...

    EXT异步提交FORM表单

    EXT异步提交FORM表单的核心是通过Ajax技术实现表单数据的后台提交,而无需刷新整个页面。这种方式的主要优点在于能够提供更加流畅的用户交互体验,同时减少了服务器端的负载压力。 ##### 2.2 实现步骤 1. **初始化...

    ext s2sh整合实例 增删改查

    综上所述,"ext s2sh整合实例 增删改查"是一个综合性的Web开发项目,展示了如何利用EXTJS构建交互式前端,通过Struts2处理请求,Spring管理依赖,Hibernate处理数据库操作,以及MD5和验证码增强安全性,最后利用Ajax...

    注册ajax验证,并带有密码强度显示

    Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器交换数据并局部更新页面,提高了交互性。EXT是一个流行的JavaScript框架,它提供了丰富的组件库,简化了前端开发。在这个场景...

    Lerx 开源网站内容管理系统(CMS) v6.0

    支持验证码的短信和邮件发送一键式切换。9.HTML页面真静态化技术,页面刷新快。10.具有独立的投票、点赞、访问统计、结构树状图模块,全面的日志系统,低耦合设计。绑定到不同的对象即能完成相应的功能。11. 具有...

    关于JS 的一些特效例子

    3. **模态框(Modal)**:当用户触发某个操作,如点击按钮,一个弹出框会在页面中心显示,用于显示详细信息或进行进一步操作。 4. **滚动动画**:随着用户滚动页面,某些元素可以有动画效果,如固定头部导航、背景...

    Lerx开源网站内容管理系统(CMS.ext)-其他

    5.★前后台用户登录均支持首次不显示验证码模式。拥有多次失败登录后限时锁定及解锁机制。6.★可以使用用户名、邮箱、手机号码或利用QQ、微信、微博等社交平台互联任一方式进行登录。每个用户拥有一个身份名片,在PC...

    KODExplorer 芒果云-资源管理器

    - 登录成功后 验证码输错清除 - 非root用户拖拽到文件夹问题 - 非root解压问题 不能解压 - list oexe 图标问题 - 用户目录不存在判断 - fileCahe 互斥锁 reset 不用 - ie 8~10样式问题调整 ###ver2.6 `...

Global site tag (gtag.js) - Google Analytics