注册时, 应该基于ajax, 而不仅仅只涉及ajax, 一个更加完善的注册流程, 还是比较复杂的, 下面提供参一个参考的注册流程
前端代码
前端代码仅做示例, 字段仅有用户名, 密码, 邮箱
它实际至少需要2个页面, 这里仅给出regist.html, 而regist_ok.html需手动增加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
<title>推箱子 注册</title>
<style>
*{margin: 0;padding: 0;}
/* body背景图片 */
body{background-image: url(../images/img_registbg.jpg);
background-size: 500px 500px;
}
/* 注册框 */
#registbox{height: 650px;width: 520px;background-color: beige;position: relative;top: 100px;margin: 0 auto;padding-top: 22px;}
#registtext{height: 43px;width: 474px;margin-bottom: 44px; text-align: center;font-size: 30px;font-family: "华文行楷";text-decoration: underline;}
#usernamebox{margin-bottom: 30px;}
#pwdbox{margin-bottom: 30px;}
#emailbox{margin-bottom: 30px;}
#repwdbox{margin-bottom: 30px;}
#checkCode{margin-bottom: 45px;padding-left: 87px;}
</style>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<main>
<div id="registbox" >
<div id="registtext">
<span>注册</span>
</div>
<form onsubmit="return checkall()">
<div align="center" id="usernamebox">
<input type="text" class="inputgri" id="username" placeholder="请输入用户名" onblur="checkUserName()" style="width: 341px;height: 44px;font-size: 18px;"/>
<span id="usertip" style="position: absolute;top: 130px;"></span>
<!-- 提示id是否存在 -->
</div>
<div align="center" id="pwdbox">
<input type="password" class="inputgri" id="pwd" placeholder="请输入密码" onblur="checkPassWord()" style="width: 341px;height: 44px;font-size: 18px;"/>
</div>
<div align="center" id="repwdbox">
<input type="password" class="inputgri" id="repwd" placeholder="请再次输入密码" onblur="checkRePassWord()" style="width: 341px;height: 44px;font-size: 18px;"/>
</div>
<div align="center" id="emailbox">
<input type="email" class="inputgri" id="email" placeholder="请输入邮箱" onblur="checkEmail()" style="width: 341px;height: 44px;font-size: 18px;" />
</div>
<div id="checkCode">
<input type="text" id="inputCode3" name="inputCode" placeholder="请输入验证码" onblur="checkCode2()" style="width: 228px;height: 44px;font-size: 18px;"/>
<input type="button" id="Code" value="----" onclick="changeCode()" style="width: 94px;height: 42px;font-size: 18px;text-align: center;margin-left: 15px;" />
</div>
<div align="center" id="startregistbox">
<input type="submit" class="button" value="立即注册" style="width: 341px;height: 44px;font-size: 18px;"/>
</div>
</form>
</div>
</body>
<script>
var Code = "";
onload = function(){
changeCode();
}
function changeCode(){ //更改验证码
var CodeHouse = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var s1 = CodeHouse.charAt(Math.random()*62);
var s2 = CodeHouse.charAt(Math.random()*62);
var s3 = CodeHouse.charAt(Math.random()*62);
var s4 = CodeHouse.charAt(Math.random()*62);
var s = s1+s2+s3+s4;
var CodeNode = document.getElementById("Code");
CodeNode.value=s;
Code = s; //保存到全局变量Code中，后面验证需要
// alert(Code)
}
</script>
<script>
// alert("校验用户名");
var nameflag = false;
function checkUserName(){
//1.获取用户名的值
let username = $("#username").val();
// alert(username)
//2.定义正则表达式
let reg_username = /^\w{1,20}$/;
//3.判断，给出提示信息
let flag = reg_username.test(username);
if(flag){
//用户名输入格式合法，再异步请求检测是否重名
$.post("registNameServlet",{username:$("#username").val()},
function(msg){
if(msg=="no"){
$("#usertip").css("color","red");
$("#usertip").text(msg);
flag=false;
}else {
//可以注册
$("#usertip").css("color","green");
$("#usertip").text(msg);
flag=true;
}
},"text");
//异步请求发送成功，是否合法均清除红色边框
$("#username").css("border","");
// alert("1")
}else{
//用户名非法，加个红色的边框
$("#username").css("border","2px solid red");
// alert("2")
}
nameflag = flag;
}
// alert("校验密码")
function checkPassWord(){
//1.获取密码的值
let pwd = $("#pwd").val();
//2.定义正则表达式
let reg_pwd = /^\w{6,16}$/;
//3.判断，给出提示信息
let flag = reg_pwd.test(pwd);
if(flag){
//密码合法，去掉红色边框
$("#pwd").css("border","");
// alert("1")
}else{
//密码不合法，增加红色边框
$("#pwd").css("border","2px solid red");
// alert("2")
}
return flag;
}
// 校验再次输入密码
function checkRePassWord(){
//1.获取密码的值
let repwd = $("#repwd").val();
let pwd = $("#pwd").val();
// //2.定义正则表达式
// var reg_repwd = /^\w{6,16}$/;
//3.判断，给出提示信息
let flag = false;
if(repwd==pwd&&repwd!=""){
//密码合法，去掉红色边框
$("#repwd").css("border","");
// alert("1")
flag = true;
}else{
//密码不合法，增加红色边框
$("#repwd").css("border","2px solid red");
// alert("2")
}
return flag;
}
//校验邮箱
function checkEmail(){
//1.获取邮箱
let email = $("#email").val();
//2.定义正则
let reg_email = /^\w+@\w+\.\w+$/;
//3.判断
let flag = reg_email.test(email);
if(flag){
$("#email").css("border","");
}else{
$("#email").css("border","2px solid red");
}
return flag;
}
//检查验证码
function checkCode2(){
var code = $("#Code").val();
var inputCode = $("#inputCode3").val();
var flag = false;
if(code.toLowerCase()==inputCode.toLowerCase()){
flag = true;
}else {
flag = false;
}
if(flag){
$("#inputCode3").css("border","");
}else{
$("#inputCode3").css("border","2px solid red");
}
return flag;
}
//当表达提交时，调用所有的校验方法
function checkall(){
// 1.发送数据到服务器
if(nameflag&&checkPassWord()&&checkRePassWord()&&checkEmail()&&checkCode2()){
//ajax异步请求
// alert("校验通过")
$.post("registUserServlet",{username:$("#username").val(),
password:$("#pwd").val(),email:$("#email").val()},
function(msg){
//刷新验证码，下次注册必须重新输入
changeCode();
if(msg!="注册成功"){
alert( "提示: " + msg);
}else {
//注册成功
}
},"text");
//注册成功
location.href="register_ok.html";
};
//2.跳转页面
return false;
}
</script>
</html>
后端代码
后端代码, 至少需要2个servlet, 一个是注册检验用户名, 一个是在用户名校验通过的情况下, 再完整的注册用户, 仅给出后者的代码, 而domain和dao也需要手动补全
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/Sokoban/html/registUserServlet")
public class registUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("--------------------------------------------");
//1.设置响应编码
response.setContentType("text/html;charset=UTF-8");
//获取用户名
String username = request.getParameter("username");
//获取密码
String password = request.getParameter("password");
//获取用户邮箱
String email = request.getParameter("email");
System.out.println("(注册)取得用户名称为："+username);
System.out.println("(注册)取得用户密码为："+password);
System.out.println("(注册)取得用户的邮箱为："+email);
//2.查询数据库，是否存在这样的一个用户名。
//获取dao对象，通过dao，查询是否存在该User
//理论上几乎100%成功, 除非刚好被别人注册了, 有极小的可能性
UserDao dao = new UserDaoImpl();
User user = dao.scByUserName(username);
if(user!=null){
System.out.println("已存在此用户名，无法注册");
response.getWriter().write("此用户名太受欢迎，请换个试试");
}else{
System.out.println("该用户名没有被占用，注册成功");
String activeCode = UuidUtil.getUuid();
//保存到数据库中
dao.save(new User(username,password,email,"",activeCode,"N"));
response.getWriter().write("注册成功");
String url = new String(request.getRequestURL());
String s = url.substring(0,url.lastIndexOf('/')+1);
String context =username+",感谢您注册完美推箱子！\n"
+"请点击链接激活"+s+"activeUserServlet?activeCode="+activeCode+"&username="+username;
MailUtils.sendMail(email,context,"激活邮件");
System.out.println("激活邮件发送成功");
}
System.out.println("--------------------------------------------");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}本篇完，还有疑问？
加入QQ交流群：11500065636 