登录验证

一、为表单设置action属性

<form action="/checkServlet">
        <div id="loginTitle">
          <b>账号登录</b>
        </div>
        <div id="table">
          <!--增加提示用户密码为空的提示框-->
          <c:if test="${sessionScope.name!='wrong'}">
            <div class="tip2 tip">
                <span></span>
            </div>
          </c:if>
          <c:if test="${sessionScope.name=='wrong'}">
            <div class="tip1 tip">
              输入的用户名或密码有误！
            </div>
          </c:if>
          <div id="name">
            <input id="input_user" style=" 320px;height: 30px"
                   type="text" name="userName" placeholder="用户名"
                   >
          </div>
          <div id="password">
            <input id="input_password" style=" 320px;height: 30px"
                   type="password" name="userPassword" placeholder="密码"
                   >
          </div>

          <div style="position: absolute; left:30px; top:200px; 320px">
            <span style="color:red;float:left">学生选择@stu.swpu.edu.cn</span>
            <a href="#" style="float: right;">忘记密码</a>
          </div>
          <div style="position: absolute; left:30px; top:240px; 320px">
            <input onclick="fnLogin()" style="float:right;background:url(img/login_btn.jpg);" id="btn" type="submit"
                   value="登 录" />
          </div>
        </div>
      </form>

二、JQuery中设置提示标签

$(function(){
          $("#input_user").focus(function(){

              //document.getElementsByClassName("tip1").style.display="none";
              $(".tip1").css({"display":"none"});
          });
      });

三、文件

四、Servlet类

//设置编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        //获取参数
        String username = request.getParameter("userName");
        String password = request.getParameter("userPassword");
        //输出
        System.out.println(username+password);
        if(username.equals("tom") && password.equals("123")){
            PrintWriter printWriter = response.getWriter();
            printWriter.write("username: "+username+"	
password: "+password);
            printWriter.close();
        }
        else{
            HttpSession session = request.getSession();
            session.setAttribute("name","wrong");
//            request.setAttribute("data","用户名或密码错误！");
            System.out.println("56789");
            request.getRequestDispatcher("index.jsp").forward(request,response);
        }

五、效果图

成功登录后输出账号和密码：

密码错误后输入提示信息，并在重新输入时隐藏提示框：

百度云链接：链接: https://pan.baidu.com/s/1ZdgifHqzEm530ZlSQ-uHMg 提取码: qe3k