servlet进行用户名和密码校验 

输入账号密码：

保存的账号密码：

 

 HTML：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>西南石油大学电子邮件系统</title>
  <link rel="stylesheet" href="./css/style.css">
  <script>
    var checkForm = () => {
      let acount = document.querySelector('#acount')
      let password = document.querySelector('#password')
      if ('' == acount.value) {
        alert('请填写账号')
        return 
      }
      if ('' == password.value) {
        alert('请填写密码')
        return 
      }
      if ('GM' != acount.value) {
        window.alert('不存在此账号')
        acount.value = ''
        password.value = ''
        acount.focus()
        acount.select()
      } else if ('GM' != password.value) {
        window.alert('密码错误')
        password.value = ''
        password.focus()
      } else if ('GM' == acount.value && 'GM' == password.value){
        window.alert('登陆成功')
        window.location.href = 'main.htm'
      }
    }
  </script>
</head>
<body>
  <header class="head">
    <img src="./img/login_logo.png" class="logo">
    <span class="help">帮助</span>
  </header>
  <div class="content-wrapper">
    <div class="login-wrapper">
      <form action="#">
        <div class="form-head">
          <span class="form-title">账号登录</span>
          <img src="./img/dragbar.png" class="dragbar">
        </div>
        <div class="form-content">
          <span class="b-block-text">用户登录</span>
          <input type="text" id="acount" class="info-item" placeholder="用户名" required>
          <input type="password" id="password" class="info-item" placeholder="密码" required>
          <div class="footer-info">
            <span class="warning-info">学生选择@stu.swpu.edu.cn</span>
            <a href="#" class="forget-psd">忘记密码</a>
          </div>
          <input class="submit" type="submit" value="登录" onclick="checkForm();return false;">
        </div>
      </form>
    </div>
    <div class="footer">西南石油大学</div>
  </div>
</body>
</html>

login.htm

CSS：
* {
  margin: 0;
  padding: 0;
}
.head {
  width: 100%;
  height: 76px;
  background: #f5f5f5;
  background-size: cover;
}
.logo {
  position: absolute;
  top: 15px;
  left: 10px;
}
.help {
  position: absolute;
  top: 40px;
  right: 35px;
  font-weight: 700;
  font-size: 15px;
  color: #b3b3b3;
}
.content-wrapper {
  position: absolute;
  top: 92px;
  left: 50%;
  margin-left: -475px;
  width: 950px;
  height: 520px;
  background: url(../img/login_bg_05.jpg)
}
.login-wrapper {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  right: 35px;
  width: 380px;
  height: 360px;
  background: #fff;
}
.login-wrapper > form {
  width: 300px;
  height: 340px;
  top: 15px;
}
.form-head {
  width: 360px;
  height: 35px;
  background: url(../img/c.png);
  font-size: 15px;
  color: #eee;
  text-align: center;
  line-height: 35px;
  opacity: .8;
  cursor: pointer;
}
.form-content {
  margin: 10px 0 10px 0;
}
.dragbar {
  position: absolute;
  right: 0;
  width: 20px;
  height: 35px;
  cursor: move;
}
.b-block-text {
  display: block;
  font-weight: 600;
  height: 22px;
  padding-top: 10px;
  text-indent: 30px;
}
.info-item {
  width: 300px;
  height: 40px;
  margin: 15px 0 12px 30px;
  padding-left: 8px;
  font-size: 18px;
  background-color: #f5f5f5;
}
.footer-info {
  margin-top: 20px;
}
.warning-info {
  color: red;
  margin-left: 30px;
}
.forget-psd {
  position: absolute;
  right: 30px;
  color: #c5c5c5;
  text-decoration: none;
}
.forget-psd:hover {
  color: #a5a5a5;
  text-decoration-line: underline;
  text-decoration-color: #c5c5c5;
}
.submit {
  position: absolute;
  right: 35px;
  bottom: 25px;
  width: 140px;
  height: 40px;
  background: #76f;
  font-size: 15px;
  color: #fff;
  letter-spacing: 10px;
  text-align: center;
  cursor: pointer;
}
.footer {
  width: 100%;
  height: 60px;
  background: #f1f1f1;
  color: #bbb;
  font-size: 14px;
  text-align: center;
  line-height: 60px;
  position: absolute;
  bottom: 0;
}

style.css


 servlet:




import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class check
 */
@WebServlet("/check")
public class check extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public check() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        
        String userName = request.getParameter("checkInID");
        String userPass = request.getParameter("checkInPass");
        
        response.getWriter().write("用户名是：" + userName;"密码是：" + userPass);
       
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

servlet






 




 






		

		
posted @ 
2019-03-30 17:23 
小丨铁匠 
阅读(279) 
评论(0) 
 
收藏 
举报