使用ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

主要实现了用户注册自动检测用户名是否已经存在的功能！
类似http://bbs.langsin.com/register.php，输入用户名注册可以检测是否已经存在，不过该网站的这个功能并没有应用ajax，而是类似服务器控件的回传，使整个页面有刷新。
这里还是使用的《一个简单的Ajax开发框架》一文ajax小框架来做！开发工具选择Eclipse！
Step1：新建一个WEB项目，做一个login.jsp页面
login.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page import="eflylab.ajax.login.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch06--案例：数据校验</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../../ajax.js"></script>
<script language="javascript">
function doCheck(type) {
var f = document.forms[0];
if("user"==type) {
if(f.username.value!="") {
document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。";
send_request("GET","registerCheck.jsp?field=username&value="+f.username.value,null,"text",showFeedbackInfo);
}
else {
document.getElementById("feedback_info").innerHTML = "请输入用户名称。";
}
}
else if("email"==type) {
if(f.email.value!="") {
//正则表达式来检测电子邮件的格式
var pattern = /^[\w＼.\-\_]+@{1}\w+(\.{1}\w+)+$/;
var result = pattern.exec(f.email.value);
if(result==null) window.alert("电子邮件格式错误，请按标准email名称格式填写,如：[email protected]。");
else {
document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。";
send_request("GET","registerCheck.jsp?field=email&value="+f.email.value,null,"text",showFeedbackInfo);
}
}
else {
document.getElementById("feedback_info").innerHTML = "请输入电子邮件。";
}
}
}
//处理服务器回传信息函数
function showFeedbackInfo() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
//alert(http_request.responseText);
document.getElementById("feedback_info").innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function aa()
{
alert('OK');
}
</script>
</head>

<body><center>
<form name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="4">
<caption>用户注册</caption>
<tr>
<td width="70">用户名称：</td>
<td width="414">
<input name="username" id="username" type="text" class="form_text" size="40" onBlur="doCheck('user')">
<input name="userCheck" type="button" class="button" id="userCheck" value="唯一性检查" onClick="doCheck('user')">
</td>
</tr>
<tr>
<td>密码：</td>
<td><input name="password" type="password" class="form_text" id="password" size="40"></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input name="email" type="text" class="form_text" id="email" size="40">
<input name="emailCheck" type="button" class="button" id="emailCheck" value="唯一性检查" onClick="doCheck('email')">
</td>
</tr>
<tr>
<td colspan="2"><label id="feedback_info" style="color:#FF0000"> </label></td>
</tr>
<tr align="center">
<td colspan="2"><input name="Submit" type="submit" class="button" value="提交"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
在上面的login.jsp中　用户姓名一块触发了一个Javascript.　提交到registerCheck.jsp处理。
registerCheck.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page import="eflylab.ajax.login.*"%>
<%
String field = request.getParameter("field");
String value = request.getParameter("value");
UserService service = new UserService();
if("username".equalsIgnoreCase(field)) {
UserValue user = service.findUserByName(value);
if(user!=null) out.println("用户名称["+value+"]已经被注册，请更换其他用户名称再注册。");
else out.println("用户名称["+value+"]尚未被注册，您可以继续。");
}
else if("email".equalsIgnoreCase(field)) {
try {
UserValue user = service.findUserByEmail(value);
if(user!=null) out.println("电子邮件["+value+"]已经被注册，请更换其他用户名称再注册。");
else out.println("电子邮件["+value+"]尚未被注册，您可以继续。");
}catch(Exception ex) {
out.println(ex.toString());
}
}
else {
out.println("参数错误。");
}
%>
该页面调用javabean进行处理，然后在javabean中我们可以从数据库中检测数据，然后将结果返回！
login.jsp页面主要使用了responseTEXT来进行处理！
我们看到效果了！

使用ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

猜你喜欢