JavaWeb使用Ajax实现仿163邮箱注册检查该账户是否存在

今天药忘吃喽~ 2023-01-09 15:37 148阅读 0赞

JavaWeb使用Ajax实现仿163邮箱注册检查该账户是否存在，如图所示：根据数据库显示，可看到账户存在，则会提示账户已存在。  
![在这里插入图片描述][20210121212823868.gif_pic_center]  
![在这里插入图片描述][20210121212930401.png]  
首先，是注册页面  
**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;
    	}

按照这样就可以实现以上页面了，码字不易，给个赞吧！

[20210121212823868.gif_pic_center]: /images/20221119/7182557cb2fd420c96ee41aeafb35bd0.png
[20210121212930401.png]: /images/20221119/d06d5b3e69b441f7b750d28dfd0c3b16.png