原文：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);
相关推荐
3. **聊天功能**：当用户发送消息时，JSP接收消息内容，将消息存入数据库，并可能需要实时更新聊天界面显示新消息。这可能涉及AJAX技术实现异步通信，提高用户体验。 4. **在线状态管理**：系统需要维护用户的在线...
WebQQ聊天系统是一款基于PHP开发的应用，它集成了腾讯QQ的基本聊天功能，使得用户可以在网页端享受即时通讯的乐趣。这款系统充分利用了QQ的IP数据库，不仅提供了基础的文字聊天功能，而且还允许用户在聊天过程中查看...
3. **JavaScript**：JavaScript是实现网页动态交互的关键，负责处理用户的输入、响应事件、更新页面内容等功能。在这个项目中，JavaScript代码处理了用户点击、拖动、输入等行为，实现了聊天功能、登录验证、好友...
4. **功能模块设计**：对登录注册、好友管理、聊天室、消息推送等核心功能进行详细描述。 5. **技术选型**：可能包含前端开发语言（如HTML、CSS、JavaScript）、后端技术（如Java、PHP或Node.js）、以及用于通信的...
【WEBQQ截图功能，OCX控件】是一个在网页端实现QQ截图功能的技术方案，它主要依赖于OCX（ActiveX）控件。OCX控件是微软开发的一种组件技术，用于在Windows环境中构建和扩展应用程序，特别是在浏览器环境中提供丰富的...
- 聊天功能：用户间的即时通讯是WebQQ的核心，这需要建立一套消息传递机制，可能涉及服务器端的消息队列和客户端的实时刷新技术，如Ajax或者WebSocket。 5. 技术挑战与优化： - 安全性：防止SQL注入、XSS攻击等...
7. **调试与测试**：由于WebQQ协议可能会有变动，源码需要不断更新和调试以适应变化。开发者需要掌握调试技巧，如使用Visual Studio的调试器，设置断点，查看变量值等。 通过学习和理解这个项目，开发者不仅可以...
3. **AJAX**：在没有WebSocket的情况下，可能会利用AJAX进行异步数据交换，实现部分页面的更新，提高用户体验。 4. **后端编程**：后端可能采用PHP（因为与Discuz整合），处理用户的登录、注册、发送消息等业务逻辑...
【描述】中提到，该源码实现了WebQQ的大部分功能，包括但不限于用户注册、登录、添加好友、创建群组等基本社交操作。全开源的设计使得开发者能够深入理解每个功能的实现细节，这对于提升C#编程技能，尤其是XML处理和...
在聊天系统中，Ajax可能用于实现私聊、群聊的实时更新，以及无刷新的好友搜索、群组查找等功能，提供平滑且高效的用户界面。 至于文件名"QQ"，可能是项目的主要源代码文件或者包含了项目的结构和资源。通常，一个...
描述中提到的“VB利用post登陆网页webqq简单一例”，表明这是一个简单的VB应用实例，它在VB的窗体界面中集成了登录功能。用户可以输入QQ账号和密码，然后通过这个窗体应用进行登录操作。由于没有提及验证码验证，这...
在【WebQQ开发实例】中，Node.js主要负责以下功能： 1. **服务器端逻辑**：Node.js服务器接收来自客户端的HTTP请求，处理聊天相关的业务逻辑，例如用户登录验证、消息发送与接收、聊天记录存储等。 2. **WebSocket...
在部署和运行QQ机器人时，你需要注册一个WebQQ应用以获取API密钥和访问令牌，这是与QQ服务器进行通信的关键。然后，你需要配置qqbot的设置，包括你的QQ号、群组ID以及Hubot的相关参数。在运行机器人后，你可以通过在...
虽然腾讯的WebQQ服务已停用，但仍有其他方式可以实现类似功能，以满足网站与用户之间实时交流的需求。不过，随着隐私保护意识的提高和社交媒体平台的发展，直接展示QQ在线状态的做法可能逐渐被其他更安全和多样化的...
在本项目“IMS”中，我们看到它被比作WebQQ，这意味着它可能具有类似的用户界面和功能，允许用户在网页上进行实时聊天。 【IMS系统架构】 IMS即时通讯系统可能基于Java技术栈构建，这通常涉及到以下几个关键组件：...
在描述中提到的“无刷新聊天室”和“webQQ”都是Ajax技术的经典应用场景，它们利用Ajax实现了以下功能： 1. **实时通信**：在聊天室应用中，Ajax使得用户无需刷新页面即可看到新的聊天消息，提升了交互体验。这通常...
第一步：新建一sql数据库webQQ,导入SQL数据库备份（在管理器里的还原备份功能，不会找找资料） 在Web.config里修改sa用户密码。 第二步：注册NT后台服务，并在windows服务管理器启动webqq服务 C:\WINDOWS\...
网站中的QQ在线联系插件是一种常见的交互式工具，它允许访客通过网页直接与网站的客服人员进行实时的在线沟通，极大地提升了...不过，为了确保数据安全和用户体验，还需要定期更新插件，遵循腾讯的相关政策和最佳实践。
对于QQ在线客服，可以通过调用腾讯提供的WebQQ API实现，这需要注册获取API密钥，并在网页中插入对应的JS代码。代码会创建一个浮动的QQ图标，当用户点击后，会调用WebQQ的聊天窗口。而MSN在线客服，由于微软已经停止...
4. **接口调用**：如果使用的是WebQQ API，需要预先注册应用并获取相应的API密钥，然后在JavaScript中调用相应接口，实现无跳转的添加好友请求。 5. **错误处理和反馈**：良好的用户体验需要包含适当的错误处理和...