通过Ajax实现注册登陆的表单验证，一看就会。

前言：

ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。

AJAX是什么

Asynchronous JavaScript And XML

是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验

常规页面刷新会更新整个页面。

ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面

代码实现：

服务器代码：

一个类写入多个servlet：

package com.dmdd.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String m = req.getParameter("m");
        try {
            Method method=this.getClass().getDeclaredMethod(m,HttpServletRequest.class,HttpServletResponse.class);
            method.setAccessible(true);
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

这个类是为了实现多个servlet可写入一个类中，简化了代码的结构，运用了反射技术。看不懂没关系，直接照着抄。

服务器具体实现代码：

package com.dmdd.servlet;

import com.dmdd.entity.User;
import com.dmdd.service.Impl.UserServiceImpl;
import com.dmdd.service.UserService;
import com.dmdd.utils.DBUtilss;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/admin.do")
public class AdminServlet extends BaseServlet{
static UserService userService=new UserServiceImpl();
    public void checkRegisterUsername(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username = req.getParameter("username");
        List<User> userExists = userService.findUserExists(username);
        String regExp = "^[a-zA-Z0-9_-]{4,16}$";
        if (!username.matches(regExp)){
            resp.getWriter().print("false");
        }
        else if(userExists!=null&userExists.size()>0){
            resp.getWriter().print("exists");
        }
        else {
            resp.getWriter().print("");
        }
    }
    public void checkRegisterPassword(HttpServletRequest req,HttpServletResponse resp) throws IOException {
        String password = req.getParameter("password");
       String regXp="^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$";
       if (!password.matches(regXp)){
           resp.getWriter().print("false");
       }
       else {
           resp.getWriter().print("true");
       }

    }
    public void checkRegisterPassword1(HttpServletRequest req,HttpServletResponse resp) throws IOException {
        String password = req.getParameter("password");
        String password1 = req.getParameter("password1");
        if (password.equals(password1)){
            resp.getWriter().print("repeat");
        }
        else {
            resp.getWriter().print("");
        }
    }
    public void checkLoginUsername(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username = req.getParameter("username");
        List<User> userExists = userService.findUserExists(username);

        if (username==null){
            resp.getWriter().print("null");
        }
        else if(userExists!=null&userExists.size()>0){
            resp.getWriter().print("exists");
        }
        else {
            resp.getWriter().print("");
        }
    }
    public void checkLoginPassword(HttpServletRequest req,HttpServletResponse resp) throws IOException {
        String password = req.getParameter("password");
        String username = req.getParameter("username");
        List<User> userExists = userService.findUserExists(username);
        if (password==null){
            resp.getWriter().print("null");
        }
        else if(userExists.get(0).getPassword()==password){
            resp.getWriter().print("true");
        }
        else {
            resp.getWriter().print("");
        }

    }
}

浏览器代码：

注册代码：

$(function (){
	//给账户对象添加失去焦点事件
	$("[name=username]:text").blur(function (){
		//连接服务器校验用户名
		$.get("/front/admin.do?m=checkRegisterUsername&username="+$(this).val(),function (data){
			if (data=="false"){
				$("#userMsg").text("请输入正确格式的用户名").css("color","red");
			}
		else if (data=="exists"){
				$("#userMsg").text("此用户已存在").css("color","red");
			}
			else {
				$("#userMsg").text("符合").css("color","green");
			}
		})
	})
	$("[name=password]:password").blur(function (){
		//连接服务器
		$.get("/front/admin.do?m=checkRegisterPassword&password="+$(this).val(),function (data){
			if (data=="false"){
				$("#passwordMsg").text("密码格式错误").css("color","red");
			}
			else if (data=="true"){
				$("#passwordMsg").text("√").css("color","green");
			}
		})
	})
	$("[name=password1]:password").blur(function (){
		$.get("/front/admin.do?m=checkRegisterPassword1&password1="+$(this).val()+"&password="+$("[name=password]:password").val(),function (data){
			if (data=="repeat"){
				$("#passwordMsg1").text("√").css("color","green")
			}
			else {
				$("#passwordMsg1").text("密码不一致").css("color","red")
			}
		})
	})
})

$.get("/front/admin.do?m=checkRegisterPassword&password="+$(this).val()

此段写 要请求的servlet地址。 get请求是把需要的参数按照如下形式传递

？参数1&参数2&参数3

登陆代码：

<script>
    $(function () {
        $("[name=username]:text").blur(function () {
            $.get("/front/admin.do?m=checkLoginUsername&username=" + $(this).val(), function (data) {
                if (data == "null") {
                    $("#usernameMsg").text("用户名不能为空").css("color", "red");
                } else if (data == "exists") {
                    $("#usernameMsg").text("√").css("color", "green");
                } else {
                    $("#usernameMsg").text("用户名不存在").css("color", "red");
                }
            })
        })
        $("[name=password]:password").blur(function () {
            $.get("/front/admin.do?m=checkLoginPassword&password=" + $(this).val() + "&username=" + $("[name=username]:text").val(), function (data) {
                if (data == "null") {
                    $("#passwordMsg").text("密码不能为空").css("color", "red");
                } else if (data == "true") {
                    $("#passwordMsg").text("√").css("color", "green");
                } else {
                    $("#passwordMsg").text("密码错误").css("color", "red");
                }
            })
        })
    })
</script>

 至于为什么要用jquery写，因为jquery写ajax最简单

效果图：