摘要：頁面向傳遞一個(gè)參數(shù)，其值表示調(diào)用那個(gè)方法用戶名密碼驗(yàn)證碼換一張登錄重置代碼得到所有的錯(cuò)誤信息，循環(huán)遍歷之。

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(){

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

function login(){

var bool = true;//表示校驗(yàn)通過
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);
              }
        }
    });    
}

}

// 校驗(yàn)登錄名
function validateLoginname() {

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

}

// 校驗(yàn)驗(yàn)證碼
function validateVerifyCode() {

var bool = true;
$("#verifyCodeError").css("display", "none");
var value = $("#verifyCode").val();
if(!value) {//非空校驗(yàn)
    $("#verifyCodeError").css("display", "");
    $("#verifyCodeError").text("驗(yàn)證碼不能為空！");
    bool = false;
} else if(value.length != 4) {//長度不為4就是錯(cuò)誤的
    $("#verifyCodeError").css("display", "");
    $("#verifyCodeError").text("錯(cuò)誤的驗(yàn)證碼！");
    bool = false;
} else {//驗(yàn)證碼是否正確
    $.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("錯(cuò)誤的驗(yàn)證碼！");
                bool = false;                    
            }
        }
    });
}
return bool;

}

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

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

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

  } 

后臺(tái)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得到校驗(yàn)結(jié)果
    boolean b = studentService.ajaxValidateLoginname(loginname);
    resp.getWriter().print(b);
    return null;
}

public String ajaxValidateVerifyCode(HttpServletRequest req,
        HttpServletResponse resp) throws ServletException, IOException {
    //1. 獲取輸入框中的驗(yàn)證碼
    String verifyCode = req.getParameter("verifyCode");
    // 2. 獲取圖片上真實(shí)的校驗(yàn)碼
    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("用戶名或密碼錯(cuò)誤");
        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";//重定向到主頁
    }
}

}
注意：這里我自己編寫了一個(gè)BaseServlet繼承了HttpServlet然后通過獲得method參數(shù)，然后通過反射調(diào)用對應(yīng)的方法。