登录页面表单验证-利用jqueryajax实现实时刷新

登录页面表单验证-利用jqueryajax实现实时刷新

正在学习javaweb，最近刚写了一个表单验证的代码，放在博客里面记录，分享一下。

一、页面

博主还是初学者，前端部分的代码只能看懂一些基础，这里用的是尚硅谷的书城项目的页面，由于不是自己编写的所以就不放上来了。展示一下实现效果：

二、代码部分

客户端代码

$(function () {
			//利用ajax局部刷新
			//给用户名输入框绑定失去焦点事件
			$("#username").blur(function () {
				//利用DOM对象获取用户名
				var username = this.value;
				$.getJSON("http://localhost:8080/bookstore_project/userServlet",
                          "action=ajaxExistUsername&username=" + username,function (data) {
							if (data.existUsername){
								$("span.errorMsg").text("用户名已存在");
							}else {
								$("span.errorMsg").text("用户名可用");
							}
						});
			});
    //给密码输入框绑定失去焦点事件
			$("#password").blur(function () {
				var password = this.value;
				$.getJSON("http://localhost:8080/bookstore_project/userServlet",
                          "action=ajaxPassword&password=" + password,function (data) {
					if (data.ajaxPassword){
						$("span.errorMsg").text(" ");
					}else {
						$("span.errorMsg").text("密码不合法");
					}
				});
			});
    //给密码确认框绑定失去焦点事件
			$("#repwd").blur(function () {
				var password = $("#password").val();
				var rePassword = this.value;
				$.getJSON("http://localhost:8080/bookstore_project/userServlet",
                          "action=rePassword&password="+password
				+"&rePassword="+rePassword,function (data) {
					if (data.rePassword){
						$("span.errorMsg").text(" ");
					}else {
						$("span.errorMsg").text("密码不一致");
					}
				});
			});

servlet代码

//判断用户名是否已经存在
protected void ajaxExistUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        //获取请求的参数
        String username = req.getParameter("username");
        //调用userService.existUsername
        boolean existUsername = userService.existUsername(username);//这里就是简单的通过调用service调用dao层进行数据库检索
        //把返回的结果封装成为map对象
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("existUsername", existUsername);
    	//转化为json对象，这里用了谷歌的Gson.jar包
        Gson gson = new Gson();
        String json = gson.toJson(resultMap);
        resp.getWriter().write(json);
    }
//判断密码格式是否正确
    protected void ajaxPassword(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        String password = req.getParameter("password");
        //正则表达式
        String passwordPattern = "\\w{5,12}";
        Pattern pattern = Pattern.compile(passwordPattern);
        Matcher matcher = pattern.matcher(password);
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("ajaxPassword", matcher.find());
        Gson gson = new Gson();
        String json = gson.toJson(resultMap);
        resp.getWriter().write(json);
    }
//判断两次密码输入是否一致
    protected void rePassword(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        String password = req.getParameter("password");
        System.out.println(password);
        String rePassword = req.getParameter("rePassword");
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("rePassword", password.equals(rePassword));
        Gson gson = new Gson();
        String json = gson.toJson(resultMap);
        resp.getWriter().write(json);
    }

邮箱的验证和密码的验证几乎一样，这里就不放上来啦
欢迎评论区和博主一起讨论哦，大家一起学习，一起进步