JavaWeb使用Ajax实现仿163邮箱注册检查该账户是否存在
JavaWeb使用Ajax实现仿163邮箱注册检查该账户是否存在，如图所示：根据数据库显示，可看到账户存在，则会提示账户已存在。
首先，是注册页面
regist.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="/admin/common.jspf"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="${basePath}/index/css/regist.css" />
<title>Insert title here</title>
</head>
<body>
<title>jq+css3用户注册</title>
<script id="jquery_183" type="text/javascript" class="library"
src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="top">
<h1>用户注册</h1>
</div>
<div class="form-bak">
<form method="post" action="#" onsubmit="adaptValue();">
<div class="left">
<div class="line" id="line_account">
<div class="info">
<strong>邮箱</strong> <span class="tips">邮箱就是账号</span>
</div>
<div class="input">
<input type="text" name="account" id="account"
onblur="v_account();" onkeyup="v_account();" />
<div class="none">
<span></span>
</div>
</div>
</div>
<div class="line" id="line_name">
<div class="info">
<strong>用户名</strong> <span class="tips">只能由数字、文字或下划线组成<br />最多32个字符
</span>
</div>
<div class="input">
<input type="text" name="name" id="name" onblur="v_name();"
onkeyup="v_name();" />
<div class="none">
<span></span>
</div>
</div>
</div>
<div class="line" id="line_password">
<div class="info">
<strong>密码</strong> <span class="tips">6至16个字符</span>
</div>
<div class="input">
<input type="password" name="password" id="password"
onblur="v_password();" onkeyup="v_password();" />
<div class="none">
<span></span>
</div>
</div>
</div>
<div class="line" id="line_repeat">
<div class="info">
<strong>确认密码</strong> <span class="tips">再次输入密码</span>
</div>
<div class="input">
<input type="password" name="repeat" id="repeat"
onblur="v_repeat();" onkeyup="v_repeat();" />
<div class="none">
<span></span>
</div>
</div>
</div>
</div>
<div class="right">
<input type="submit" id="submit" value="完成注册" disabled="disabled" />
<div class="readagreement-wrap" onclick="onReadAgreementClick();">
<input type="checkbox" name="agree" id="agree"
onchange="v_submitbutton();" /> 同意《<a id="readagreement"
href="#agreement" onclick="showAgreement();" title="查看用户使用协议">用户使用协议</a>》
</div>
<div>
已经拥有账号，<a href="#">直接登录</a>
</div>
<div>
忘记密码，<a href="#">请联系管理员</a>
</div>
</div>
</form>
</div>
<div id="agreement" class="agreement" style="display: none;">
<h1>用户使用协议</h1>
<iframe src=""></iframe>
<input type="button" value="同意" onclick="agree();" /> <a href="#"
class="backtotop">返回顶部</a>
</div>
</body>
</html>
<script>
function enableSubmit(bool) {
if (bool)
$("#submit").removeAttr("disabled");
else
$("#submit").attr("disabled", "disabled");
}
function v_submitbutton() {
if ($("#agree").attr("checked") != "checked") {
enableSubmit(false);
$(".readagreement-wrap").css("outline", "1px solid #f99");
return;
} else {
$(".readagreement-wrap").css("outline", "1px solid #9f9");
}
for (f in flags)
if (!flags[f]) {
enableSubmit(false);
return;
}
enableSubmit(true);
}
function showAgreement() {
$("#readagreement").removeAttr("onclick");
$("#agreement").show();
$("#agreement iframe").attr("src", "http://www.baidu.com");//此处为链接地址
}
function agree() {
$("#agreement").hide();
$("#readagreement").attr("onclick", "showAgreement();");
if ($("#agree").attr("checked") != "checked")
$("#agree").trigger("click");
}
function onReadAgreementClick() {
return;
if ($("#agree").attr("checked")) {
$("#agree").removeAttr("checked");
} else {
$("#agree").attr("checked", "checked");
}
v_submitbutton();
}
var flags = [ false, false, false, false ];
//邮箱验证，网上找到的正则
var RegEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
function lineState(name, state, msg) {
if (state == "none") {
$("#line_" + name + " .input div").attr("class", "none");
return;
}
if (state == "corect") {
$("#line_" + name + " .input div").attr("class", "corect");
return;
}
$("#line_" + name + " .input span").text(msg);
$("#line_" + name + " .input div").attr("class", "error");
}
function v_account() {
var account = $("#account").val();
if (!RegEmail.test(account)) {
lineState("account", "error", "邮箱格式不正确");
flags[0] = false;
enableSubmit(false);
}
else {
lineState("account", "corect", "");
flags[0] = true;
}
v_submitbutton();
}
function v_name() {
var name = $("#name").val();
(function queryList(){
//定义 传送的参数
var parm="action=checkname&&name="+name;
//发送ajax请求
$.ajax({
dataType:"json",
type:"post",
url:"${basePath}/UserServlet?"+parm,
success:function(data){
//调用填充数据的函数
if(data==null){
}else{
//alert("错误");
lineState("name", "error", "当前用户已存在");
}
},
error:function(){
alert("请求失败");
}
});
})()
if (name.length == 0) {
lineState("name", "error", "不得为空");
flags[1] = false;
}
else {
if (name.length > 32) {
lineState("name", "error", "必须少于32个字符");
flags[1] = false;
}
else {
lineState("name", "corect", "");
flags[1] = true;
}
}
v_submitbutton();
}
function v_password() {
var password = $("#password").val();
if (password.length < 6) {
lineState("password", "error", "必须多于或等于6个字符");
flags[2] = false;
}
else {
if (password.length > 16) {
lineState("password", "error", "必须少于或等于16个字符");
flags[2] = false;
}
else {
lineState("password", "corect", "");
flags[2] = true;
}
}
v_repeat();
v_submitbutton();
}
function v_repeat() {
if (!flags[2]) {
lineState("repeat", "none", "");
return;
}
if ($("#password").val() != $("#repeat").val()) {
lineState("repeat", "error", "密码不一致");
flags[3] = false;
}
else {
lineState("repeat", "corect", "");
flags[3] = true;
}
v_submitbutton();
}
function adaptValue() {
return true;
}
</script>
</body>
</html>
UserServlet.java
private void checkname(HttpServletRequest request,
HttpServletResponse response) throws IOException {
// TODO Auto-generated method stub
PrintWriter out=response.getWriter();
String name=request.getParameter("name");
User user=userservice.checkname(name);
String json=JSON.toJSONString(user, true);
System.out.println(json);
out.write(json);
out.flush();
out.close();
}
UserDaoImpl.java
public Book findByid(int id) {
// TODO Auto-generated method stub
String sql="select books.id id,books.name name,info,types.name typename,bookDate from books inner join types on types.id=books.typeid where books.id=?";
Object[] obj={
id};
Book book=null;
try {
book=(Book) dbutil.getObject(Book.class, sql, obj);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return book;
}
按照这样就可以实现以上页面了，码字不易，给个赞吧！