登录的页面规划以及js的考证，ajax的考证码考证

2024年2月18日 123次阅读 来源: pscSegmentfault

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+”/”;
%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>

<base href="<%=basePath%>">

<title>My JSP 'login.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

 <style type="text/css">    
 body{    
  background-image:url(image/bg.jpg); 
  background-repeat: repeat-x;
    }  
    .top{
     height:250px;
     width:750px;
     margin-top:1px;
     margin-left:280px;
     background-image:url(image/logo.jpg);
    }  
 </style>

<script type=”text/javascript” src=”js/jquery-easyui-1.4.4/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery-easyui-1.4.4/jquery.easyui.min.js”></script>
<link rel=”stylesheet” href=”js/jquery-easyui-1.4.4/themes/default/easyui.css” type=”text/css”></link>
<link rel=”stylesheet” href=”js/jquery-easyui-1.4.4/themes/icon.css” type=”text/css”></link>
<script type=”text/javascript” src=”js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js”></script>

<script type=”text/javascript” src=”myjs/login.js”></script></head>

<body>
<div class=”mian”>
<div class=”top”>
</div>
<div class=”bottom”>
<form action=”<c:url value=’/LoginStudentServlet’/>” method=”post” id=”formLogin”>
<!– 向Servlet通报一个method参数，其值示意servlet挪用谁人要领 –>
<input type=”hidden” name=”method” value=”loginValidate”/>

<label class=”errorClass” id=”msg”>${msg }</label>
用户名<input class=”inputClass” type=”text” name=”loginname” id=”loginname” value=”${student.loginname }”/><label class=”errorClass” id=”loginnameError” >${errors.loginname }</label>
暗码<input class=”inputClass” type=”password” name=”loginpass” id=”loginpass” value=”${student.loginpass }”/><label class=”errorClass” id=”loginpassError”>${errors.loginpass }</label>
验证码<input class=”inputClass” type=”text” name=”verifyCode” id=”verifyCode” value=”${student.verifyCode }”/><label class=”errorClass” id=”verifyCodeError”>${errors.verifyCode}</label>
<img id=”imgVcode” src=”/onlineexam/VerifyCodeServlet”/>换一张
<input type=”button” value=”登录” id=”submit” onclick=”javascript:login()”/>      <input type=”reset” value=”重置”/>

</form>
</div>
</div>
</body>
</html>

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参数，然后经由过程反射挪用对应的要领。

    原文作者：pscSegmentfault
    原文地址: https://segmentfault.com/a/1190000004698631
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞