资讯专栏INFORMATION COLUMN

登录的页面布局以及js的验证,ajax的验证码验证

RichardXG / 1737人阅读

摘要:页面向传递一个参数,其值表示调用那个方法用户名密码验证码换一张登录重置代码得到所有的错误信息,循环遍历之。

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





My JSP "login.jsp" starting page



    



 










" method="post" id="formLogin">

用户名
密码
验证码
换一张
    





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参数,然后通过反射调用对应的方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/65651.html

相关文章

  • 登录页面布局以及js验证ajax验证验证

    摘要:页面向传递一个参数,其值表示调用那个方法用户名密码验证码换一张登录重置代码得到所有的错误信息,循环遍历之。 jsp页面: My JSP login.jsp starting page body{ background-image:url(image/bg.jpg); background-repeat: repeat-x;...

    hedzr 评论0 收藏0
  • PHP 实现用户注册登录功能

    摘要:本项目发布在实验楼,分为四部分内容前端页面制作,验证码制作,实现注册登陆,功能完善。全部章节及代码详解可以在实验楼中在线完成实现用户注册登录功能验证码制作一实验简介本次实验将会带领大家使用面向对象的思想封装一个验证码类。 项目简介:本课程通过使用 PHP 及 Web 前端技术实现一个网站注册登录入口页面,学习并实践 PHP 编程,GD库,MySQL 扩展,Bootstrap 响应式布局...

    crelaber 评论0 收藏0
  • 前端框架快速开发静态页面

    摘要:框架开发解放了生产力,让一个静态页面效果更逼真,也让用户体验逐渐上去,但是目前对网站的需求主要还是为了展示和宣传一些东西,反观教育机构和政府部门的网站都是偏动画少,体现了公关的严肃性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久没有写文章,不忙也忙的生活节奏,博客...

    李世赞 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<