原文：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);