WebQQ更新：用户注册效能

WebQQ更新：用户注册功能

本次更新==>用户注册功能：
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);

?