Day42 Web开发2 注册功能

 

register.html （表单验证）

• 使用js完成表单校验
• 使用ajax完成表单提交
• 注册成功，跳转到成功界面

<script>
        /*
            表单校验：
                1.用户名：单词字符，长度8到20位
                2.密码：单词字符，长度8到20位
                3.email：邮件格式
                4.姓名：非空
                5.手机号：手机号格式
                6.出生日期：非空
                7.验证码：非空
         */

		//校验用户名
		//单词字符，长度8到20位
	function checkUsername() {
		//1.获取用户名值
		var username = $("#username").val();
		//2.定义正则
		var reg_username = /^\w{8,20}$/;

		//3.判断，给出提示信息
		var flag = reg_username.test(username);
		if (flag) {
			//用户名合法
			$("#username").css("border", "");
		} else {
			//用户名非法,加一个红色边框
			$("#username").css("border", "1px solid red");
		}

		return flag;
	}

	//校验密码
	function checkPassword() {
		//1.获取密码值
		var password = $("#password").val();
		//2.定义正则
		var reg_password = /^\w{8,20}$/;

		//3.判断，给出提示信息
		var flag = reg_password.test(password);
		if (flag) {
			//密码合法
			$("#password").css("border", "");
		} else {
			//密码非法,加一个红色边框
			$("#password").css("border", "1px solid red");
		}

		return flag;
	}

	//校验邮箱
	function checkEmail() {
		//1.获取邮箱
		var email = $("#email").val();
		//2.定义正则		itcast@163.com
		var reg_email = /^\w+@\w+\.\w+$/;

		//3.判断
		var flag = reg_email.test(email);
		if (flag) {
			$("#email").css("border", "");
		} else {
			$("#email").css("border", "1px solid red");
		}

		return flag;
	}

	$(function () {
		//当表单提交时，调用所有的校验方法
		$("#registerForm").submit(function () {
			//1.发送数据到服务器
			if (checkUsername() && checkPassword() && checkEmail()) {
				//校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

				$.post("registUserServlet", $(this).serialize(), function (data) {
					//处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

					if (data.flag) {
						//注册成功，跳转成功页面
						location.href = "register_ok.html";
					} else {
						//注册失败,给errorMsg添加提示信息
						$("#errorMsg").html(data.errorMsg);

					}
				});

			}
			//2.不让页面跳转
			return false;
			//如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
		});

		//当某一个组件失去焦点是，调用对应的校验方法
		$("#username").blur(checkUsername);
		$("#password").blur(checkPassword);
		$("#email").blur(checkEmail);


	});
</script>

 获取数据，返回信息

• registUserServlet
  • 获取数据
  • 封装User对象
  • 调用service完成注册，提示信息
    • 将提示信息转为 json
    • 设置响应头 contentType

@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //验证校验
        String check = request.getParameter("check");
        //从sesion中获取验证码
        HttpSession session = request.getSession();
        String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
        //比较
        if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info = new ResultInfo();
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
            //将info对象序列化为json
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }

        //1.获取数据
        Map<String, String[]> map = request.getParameterMap();

        //2.封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //4.响应结果
        if(flag){
            //注册成功
            info.setFlag(true);
        }else{
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }

        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);

        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}