用户注册界面实现

1.实现功能

1.当用户输入用户名时，用ajax获取用户输入的用户名并向后端传值进行验证，同时前端获取验证结果后分别进行显示。

2.提交表单时，需要用户的信息填写正确，否则无法提交

3.提交后跳转到登录页面

2.前端验证代码

<script>
$(function() {
	var check_username = false;
	var check_password = false;
	var check_cpassword = false;
	var check_emailurl = false;
	var check_isallow = true;
})
	$("#user_name").blur(function () {
		selectUser();
	})

	$("#pwd").blur(function () {
		check_pw();
	})
	$("#cpwd").blur(function () {
		check_cpw();
	})
	$("#email").blur(function () {
		check_email();
	})
	$("#allow").click(function () {
		check_allow();

	})
	$("#register_form").bind('submit', function() {
		var result= (check_username  && check_password && check_cpassword && check_emailurl && check_isallow )
		// alert(result);
		if (result==false){
			alert("请将信息修改正确")
		}else{
			result=true;
		}
		return result;
	});
	function selectUser() {
		var username=$("#user_name").val();
			$.ajax({
				type:"post",
				url:"/selectUser",
				dataType:"text",
				data:{"username":username},
				success:function (result){
					if (result == "false") {
						$("#user_name").next().hide();
						check_username = true;
					}else {
						$('#user_name').next().html('用户名已被使用');
						$('#user_name').next().show();
						check_username = false;
					}
			}
			})
	}
	function check_pw() {
		var pw=$("#pwd").val();
		var len=pw.length;
		if(!(len >= 8)||len>20){
			$("#pwd").next().html("密码应该大于8位同时小于20位");
			$("#pwd").next().show();
			check_password=false;
		}else {
			$("#pwd").next().hide();
			check_password=true;
		}

	}
	function check_cpw() {
		var pw=$("#pwd").val();
		var cpw=$("#cpwd").val();
		if(cpw!=pw){
			$("#cpwd").next().html("两次密码不一样");
			$("#cpwd").next().show();
			check_cpassword=false;
		}else {
			$("#cpwd").next().hide();
			check_cpassword=true;
		}
	}
	function check_email() {
		var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
		var email=$("#email").val()
		if(!(re.test(email))){
			$("#email").next().html("邮箱格式不对");
			$("#email").next().show();
			check_emailurl=false;
		}else {
			$("#email").next().hide();
			check_emailurl=true;
		}
	}
	function check_allow() {
		var result=$("#allow").is(":checked");
		if(result){
			$("#allow").next().next().hide();
			check_isallow=true;
		}else {
			$("#allow").next().next().html("请同意用户协议");
			$("#allow").next().next().show();
			check_isallow=false;
		}
	}
</script>

3.验证用户名是否已经注册

SelectUserName.java

import service.impl.UserService;

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;
import java.io.PrintWriter;
@WebServlet("/selectUser")
public class SelectUserName extends HttpServlet {
    UserService service=new UserService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer=resp.getWriter();
        String username=req.getParameter("username");
        User user=new User();
        user.setUsername(username);
        String result;
        result=String.valueOf(service.select_username(user));
        writer.write(result);
    }
}

UserService.java

 public boolean select_username(User user) {
        String username=user.getUsername();
        String sql=String.format("select username from user_tb where username='%s'",username);
        boolean result=dao.select_username(sql);
        return result;
    }

UserDao.java

public boolean select_username(String sql) {
    boolean result=false;
    con=MysqlUtil.getConnection();
    try {
        stm=con.createStatement();
        rs=stm.executeQuery(sql);
        while(rs.next()){
            result=true;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        MysqlUtil.close(con);
        MysqlUtil.close(stm);
        MysqlUtil.close(rs);
    }
    return result;
}

4.注册添加用户

Register.java

package controller;

import bean.User;
import service.impl.UserService;

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;
import java.io.PrintWriter;
@WebServlet("/register")
public class Register extends HttpServlet {
    UserService service=new UserService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer=resp.getWriter();
        String result;
        String username=req.getParameter("username");
        String password=req.getParameter("password");
        String email=req.getParameter("email");
        User user=new User();
        user.setUsername(username);
        user.setPassword(password);
        user.setEmail(email);
        if(service.register(user)){
            resp.sendRedirect("/login.html");
        }

    }
}

UserService.java

@Override
public boolean register(User user) {
    String username=user.getUsername();
    String password=user.getPassword();
    String email=user.getEmail();
    String sql=String.format("insert into user_tb(username,password,email) values('%s','%s','%s')",username,password,email);
    boolean result=dao.insert(sql);
    return result;

}

UserDao.java

@Override
public boolean insert(String sql) {
    boolean result=false;
    con=MysqlUtil.getConnection();
    try {
        stm=con.createStatement();
        int flag = stm.executeUpdate(sql);
        if(flag>0){
            result=true;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        MysqlUtil.close(con);
        MysqlUtil.close(stm);
    }
    return result;
}

5.结果验证