WebQQ更新:用户注册功能

2015/09/23 16:59
阅读数 49

原文:http://www.abigdreamer.com/mywork/webqq-update-user-registration-function.html

 

本blog已转移到:造梦师http://www.abigdreamer.com,谢谢大家的支持,欢迎大家以后常去我的小站转转!

 

本次更新==>用户注册功能:
1.AJAX自动检测用户名是否存在




2.密码强度检测功能





AJAX自动检测用户名是否存在的说明:
实现了输入框改内容变后就发送请求,否则不发送。主要改变的就是加颜色的部分,思路就是将输入框的内容备份一份,然后验证的时候,取出输入框的内容与备份的内容比较,如果相同就返回,即不发送请求,否则想后台发送请求,希望对需要的朋友有帮助:

Register = function() {
    var regForm, regWindow;
   var account;
    var couldRegister;

    var buildForm = function() {
        regForm = new Ext.FormPanel({
            // title:'用户表单',
            monitorValid : true,
            labelWidth : 80,
            // baseCls : 'x-plain',
            labelAlign : 'left',
            buttonAlign : 'center',
            bodyStyle : 'padding:5px;',
            width : 600,
            frame : true,// 设置了面板的边角是圆弧过度的,底色, 窗口是否显示背景色
            labelWidth : 80,
            // 容器中组件默认统一配置选项
            defaults : {
                allowBlank : false
            // 验证字段是否能为空
            },

            items : [{
                fieldLabel : '账号',
                id : 'account',
                name : 'account',
                xtype : 'textfield',
                blankText : '用户名不能为空!',
                validator : checkAccount,// 指定验证器
                invalidText : '用户名已经被注册!'
            }, {
                layout : 'column',// 在formpanel的itmes加入一个column的定义
                border : true,
                labelSeparator : ':',
                items : [{
                    columnWidth : .5,// 宽度50%
                    layout : 'form',
                    border : false,
                    items : [{
                        inputType : 'password',
                        fieldLabel : '密码',
                        id : 'password',
                        name : 'password',
                        xtype : 'textfield',
                        allowBlank : false,
                        blankText : '密码不能为空!'
                    }]
                }, {
                    columnWidth : .5,// 宽度50%
                    layout : 'form',
                    border : false,
                    items : [{
                        inputType : 'password',
                        fieldLabel : '确认密码',
                        id : 'affirmPassword',
                        name : 'affirmPassword',
                        xtype : 'textfield',
                        blankText : '确认密码不能为空!',
                        invalidText : '两次密码不一致!',
                        validator : function() {
                            if (Ext.get('password').dom.value == Ext
                                    .get('affirmPassword').dom.value)
                                return true;
                            return false;
                        }
                    }]
                }, {
                    columnWidth : .5,// 宽度50%
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'textfield',
                        fieldLabel : '真实姓名',
                        name : 'name',
                        anchor : '90%'
                    }]
                }, {
                    columnWidth : .25,// 宽度25%
                    layout : 'form',
                    border : false,
                    items : [{
                        style : 'margin-top:5px',
                        xtype : 'radio',
                        fieldLabel : '性别',
                        boxLabel : '男',
                        name : 'sex',
                        checked : true,
                        inputValue : '男',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .25,// 宽度25%
                    layout : 'form',
                    labelWidth : 0,
                    labelSeparator : '',
                    hideLabels : true,// 不要Label
                    border : false,
                    items : [{
                        style : 'margin-top:5px',
                        xtype : 'radio',
                        fieldLabel : '',
                        boxLabel : '女',
                        name : 'sex',
                        inputValue : '女',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .5,// 宽度50%,新起一行
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'datefield',// 日期型
                        fieldLabel : '出生日期',
                        name : 'birthday',
                        anchor : '90%'
                    }]
                }, {
                    columnWidth : .5,
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'combo',
                        fieldLabel : '学历',
                        name : 'education',
                        anchor : '90%'
                    }]
                }, {
                    columnWidth : .35,
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'checkbox',
                        fieldLabel : '权限组',
                        boxLabel : '系统管理员',
                        name : 'popedom',
                        inputValue : '1',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .2,
                    layout : 'form',
                    labelWidth : 0,
                    labelSeparator : '',
                    hideLabels : true,
                    border : false,
                    items : [{
                        xtype : 'checkbox',
                        fieldLabel : '',
                        boxLabel : '管理员',
                        name : 'pepedom',
                        inputValue : '2',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .2,
                    layout : 'form',
                    labelWidth : 0,
                    labelSeparator : '',
                    hideLabels : true,
                    border : false,
                    items : [{
                        xtype : 'checkbox',
                        fieldLabel : '',
                        boxLabel : '普通用户',
                        name : 'pepedom',
                        inputValue : '3',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .25,
                    layout : 'form',
                    labelWidth : 0,
                    labelSeparator : '',
                    hideLabels : true,
                    border : false,
                    items : [{
                        xtype : 'checkbox',
                        fieldLabel : '',
                        boxLabel : '访客',
                        name : 'pepedom',
                        inputValue : '4',
                        anchor : '95%'
                    }]
                }, {
                    columnWidth : .8,// 宽度50%
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'textfield',
                        fieldLabel : '电子邮件',
                        vtype : 'email',
                        // regex : /^\d+$/, // 正则表达式,这里没有详细写,只是验证了数字
                        // regexText : '电子邮件格式错误!',
                        name : 'name',
                        anchor : '90%',
                        blankText : '电子邮件不能为空'
                    }]
                }, {
                    columnWidth : .8,// 宽度50%
                    layout : 'form',
                    border : false,
                    items : [{
                        xtype : 'textfield',
                        fieldLabel : '个人主页',
                        vtype : 'url',
                        name : 'name',
                        anchor : '90%'
                    }]
                }]
            }],
            buttons : [{
                text : '注册',
//                type : 'submit',
                formBind : true,
                handler : register
            }, {
                text : '清空',
                handler : function() {
                    regForm.form.reset();
                }
            }]
        });
    };

    // 检查用户名是否存在
  var checkAccount = function(e) {
        var accountTemp = Ext.get('account').dom.value;

        if (account != accountTemp) {
            account = accountTemp;

            Ext.Ajax.request({
                url : 'WebQQServlet?method=checkAccount',
                params : {
                    account : account
                },
                success : function(response, options) {
                    var responseArray = Ext.util.JSON
                            .decode(response.responseText);
                  if (responseArray.success == false) { // 用户名已经被注册
                        couldRegister = false; 
                  } else {// 用户名可以注册
                        couldRegister = true; 
                  }

                }
            });
      }

        return couldRegister;
  };
   
    // 单击按钮时执行登陆操作
    var register = function() {
        // 执行当前表单面板的submit
        regForm.getForm().submit({
            waitTitle : '系统提示',
            waitMsg : '正在登录,请等待...',// 动作发生期间显示的文本信息
            url : 'WebQQServlet?method=register',// submit发生时指向的地址logon?cmd=adminLogin
            method : 'POST',// 表单提交方式
            // Functions that fire (success or failure) when the server
            // responds.
            // The one that executes is determined by the
            // response that comes from Logon.do as seen below. The server would
            // actually respond with valid JSON,
            // something like: response.write "{ success: true}" or
            // response.write "{ success: false, errors: { reason: 'Login
            // failed. Try again.' }}"
            success : function(form, action) {// 数据验证通过时发生的动作
                window.location = 'webQQ.jsp?account='
                        + Ext.get("account").getValue();
            },
            // Failure function, see comment above re: success and failure.
            // You can see here, if login fails, it throws a messagebox
            // at the user telling him / her as much.
            failure : function(form, action) {
                if (action.failureType == 'server') {
                    obj = Ext.util.JSON.decode(action.response.responseText);
                    Ext.Msg.alert('登录失败', obj.errors.reason, function() {
                        form.findField('userAccount').focus();
                    });
                } else {
                    Ext.Msg.alert('Warning!',
                            'Authentication server is unreachable : '
                                    + action.response.responseText);
                }
                // if (action.failureType == Ext.form.Action.SERVER_INVALID)
                // Ext.MessageBox.alert('警告', action.result.errors.msg);
                longinFormPanel.getForm().reset();
            }
        });
    };

    var buildWin = function() {
        regWindow = new Ext.Window({
            id : 'regwin',
            title : '注册',
            layout : 'fit',
            // width : 320,
            height : 280,
            bodyStyle : 'padding:4px',
            maximizable : false,
            closeAction : 'close',
            closable : false,
            collapsible : true,
            buttomAlign : 'right',
            plain : true,
            items : regForm
        });
    };

    return {
        init : function() {
            Ext.BLANK_IMAGE_URL = '../plugins/extjs/ext-2.0/resources/images/default/s.gif';
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // 改变主题为紫色
            // Ext.util.CSS.swapStyleSheet("theme",
            // "../plugins/extjs/ext-2.0/resources/css/xtheme-purple.css");
            // Ext.util.CSS.swapStyleSheet("theme",
            // "../plugins/extjs/ext-2.0/resources/css/xtheme-slickness.css");
            buildForm();
            buildWin();

            // 最后把窗口面板显示出来
            regWindow.show();
        }
    }
}();

Ext.onReady(Register.init, Register);

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部