摘要：頁面向傳遞一個參數，其值表示調用那個方法用戶名密碼驗證碼換一張登錄重置代碼得到所有的錯誤信息，循環遍歷之。

jsp頁面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

">





    



 

js代碼：
$(function(){

  //得到所有的錯誤信息，循環遍歷之。調用一個方法來確定是否顯示錯誤信息！
    $(".errorClass").each(function() {
        showError($(this));//遍歷每個元素，使用每個元素來調用showError方法
    });
     // 輸入框得到焦點隱藏錯誤信息
     $(".inputClass").focus(function() {
         var labelId = $(this).attr("id") + "Error";//通過輸入框找到對應的label的id
         $("#" + labelId).text("");//把label的內容清空！
         showError($("#" + labelId));//隱藏沒有信息的label
     });
     //輸入框失去焦點進行校驗
     $(".inputClass").blur(function() {
         var id = $(this).attr("id");//獲取當前輸入框的id
         var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到對應的校驗函數名
         eval(funName);//執行函數調用,把字符串當成js代碼執行
     });         
 });

function login(){

var bool = true;//表示校驗通過
if(!validateLoginname()) {
    bool = false;
}
if(!validateLoginpass()) {
    bool = false;
}
if(!validateVerifyCode()){
    bool = false;
}
if(bool) {
    var loginname=$("#loginname").val();
    var loginpass=$("#loginpass").val();
    $.ajax({
        cache: false,
        async: false,
        type: "POST",
        dataType: "json",
        data: {method: "loginValidate", login: loginname,password:loginpass},
        url: "/onlineexam/LoginStudentServlet",
        success: function(data) {
              if(data.success){
                  if(data.successExam){
                      window.location.href="/onlineexam/demo.jsp";
                  }else{
                      window.location.href="/onlineexam/exam.jsp";
                  }
                  
              }else{
                  $.messager.alert("警告",data.msg);
              }
        }
    });    
}

}

// 校驗登錄名
function validateLoginname() {

var bool = true;
$("#loginnameError").css("display", "none");
var value = $("#loginname").val();
if(!value) {// 非空校驗
    $("#loginnameError").css("display", "");
    $("#loginnameError").text("用戶名不能為空！");
    bool = false;
} else if(value.length < 3 || value.length > 20) {//長度校驗
    $("#loginnameError").css("display", "");
    $("#loginnameError").text("用戶名長度必須在3 ~ 20之間！");
    bool = false;
}
return bool;

}
function validateLoginpass() {

var bool = true;
$("#loginpassError").css("display", "none");
var value = $("#loginpass").val();
if(!value) {// 非空校驗
    $("#loginpassError").css("display", "");
    $("#loginpassError").text("密碼不能為空！");
    bool = false;
} else if(value.length < 3 || value.length > 20) {//長度校驗
    $("#loginpassError").css("display", "");
    $("#loginpassError").text("密碼長度必須在3 ~ 20之間！");
    bool = false;
}
return bool;

}

// 校驗驗證碼
function validateVerifyCode() {

var bool = true;
$("#verifyCodeError").css("display", "none");
var value = $("#verifyCode").val();
if(!value) {//非空校驗
    $("#verifyCodeError").css("display", "");
    $("#verifyCodeError").text("驗證碼不能為空！");
    bool = false;
} else if(value.length != 4) {//長度不為4就是錯誤的
    $("#verifyCodeError").css("display", "");
    $("#verifyCodeError").text("錯誤的驗證碼！");
    bool = false;
} else {//驗證碼是否正確
    $.ajax({
        cache: false,
        async: false,
        type: "POST",
        dataType: "json",
        data: {method: "ajaxValidateVerifyCode", verifyCode: value},
        url: "/onlineexam/LoginStudentServlet",
        success: function(flag) {
            if(!flag) {
                $("#verifyCodeError").css("display", "");
                $("#verifyCodeError").text("錯誤的驗證碼！");
                bool = false;                    
            }
        }
    });
}
return bool;

}

// 判斷當前元素是否存在內容，如果存在顯示，不存在不顯示！
function showError(ele) {

var text = ele.text();//獲取元素的內容
if(!text) {//如果沒有內容
    ele.css("display", "none");//隱藏元素
} else {//如果有內容
    ele.css("display", "");//顯示元素
}

}
// 換一張驗證碼
function _hyz(){
var img=document.getElementById("imgVcode");
//需要給出一個參數，這個參數每次都不同，這樣才不會因為瀏覽器的緩存，使得不能進行換一張
img.src="/onlineexam/VerifyCodeServlet?a="+new Date().getTime();

  } 

后臺web.servlet層：
service層dao層就不一一寫出了。

public class LoginStudentServlet extends BaseServlet {

StudentService studentService = new StudentService();
ExamService examService=new ExamService();
public String ajaxValidateLoginname(HttpServletRequest req,
        HttpServletResponse resp) throws ServletException, IOException {
    // 1. 獲取用戶名
    String loginname = req.getParameter("loginname");
    //2. 通過service得到校驗結果
    boolean b = studentService.ajaxValidateLoginname(loginname);
    resp.getWriter().print(b);
    return null;
}

public String ajaxValidateVerifyCode(HttpServletRequest req,
        HttpServletResponse resp) throws ServletException, IOException {
    //1. 獲取輸入框中的驗證碼
    String verifyCode = req.getParameter("verifyCode");
    // 2. 獲取圖片上真實的校驗碼
    String vcode = (String) req.getSession().getAttribute("vCode");
    boolean b = verifyCode.equalsIgnoreCase(vcode);
    resp.getWriter().print(b);
    return null;
}

// 登錄功能

public void loginValidate(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException, SQLException {
    String name = req.getParameter("login");
    String password = req.getParameter("password");
    Student student = studentService.login(name, password);
    Score score=examService.findStudent(name);
    Json json = new Json();
    if (student == null) {
        json.setSuccess(false);
        json.setMsg("用戶名或密碼錯誤");
        resp.getWriter().print(json.toString());
        resp.getWriter().close();
        //return "r:/loginStudent.jsp";
    } else {
        if(score!=null){
            json.setSuccessExam(true);
        }
        HttpSession session = req.getSession();
        session.setAttribute("sessionStudent",student);
        session.setAttribute("sessionScore",score);
        //String string=(String) session.getAttribute("sessionName");
        //System.out.println(string);
        json.setSuccess(true);
        json.setMsg("登錄成功");
        json.setStudent(student);        
        resp.getWriter().print(json);
        resp.getWriter().close();
        //return "r:/exam.jsp";//重定向到主頁
    }
}

}
注意：這里我自己編寫了一個BaseServlet繼承了HttpServlet然后通過獲得method參數，然后通過反射調用對應的方法。