用servlet行用户名和密码校验
登录界面
验证
<!DOCTYPE html> <html> <head> <title>登录</title> <link href="login.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="topBar"> <div class="topContent"> <i></i> <p>学生登录</p> <span>帮助</span> </div> </div> <div id="main"> <div id="sign_in_part" class="login_form"> <p class="title_caption">账号登录</p> <div class="login_block"> <form method="post" action="check" id="loginForm" onsubmit="return checkForm()"> <fieldset> <h1 id="login-info">用户登录</h1> <div class="login_input"> <input type="text" id="checkInID" name="checkInID" placeholder="请输入账号" required/> <div class="clear"></div> </div> <div class="login_input"> <input type="password" id="checkInPass" name="checkInPass" placeholder="请输入密码" required/> <div class="clear"></div> </div> <div class="login_sub_in"> <button type="submit" value="登录" id="subBut">登录</button> </div> </fieldset> </form> </div> </div> </div> <div id="foot"> <p>西南石油大学登录</p> </div> </body> </html>
* { margin: 0; padding: 0; } body { background-color: #111; } #topBar { width: 100%; background-color: #f5f5f5; height: 70px; } #topBar .topContent { width: 964px; margin-left: auto; margin-right:auto; } #topBar i { display: inline-block; width: 50px; height: 50px; float: left; margin-top: 10px; background: url(../images/login_logo.png) no-repeat; } #topBar p { display: inline; line-height: 70px; margin-left: 10px; border-left: solid 1px #aaa; padding-left: 10px; } #topBar span { width: 50px; float: right; line-height: 70px; } #main { overflow: hidden; width: 964px; height: 462px; margin-left: auto; margin-right: auto; margin-top: 20px; background: url(../images/login_bg_03.jpg) no-repeat; } .login_form { width: 35%; float: right; margin-top: 100px; margin-right: 100px; } .title_caption { font-size: 16px; text-align: center; background-color: rgba(93, 209, 161); color: #000; height: 40px; line-height: 40px; } fieldset { background: rgba(255, 255, 255, 0.9); border: none; padding: 0 2em 2em 2em; } fieldset #login-info { display: block; text-align: center; height: 2em; line-height: 2em; font-size: 17px; font-weight: normal; color: #555; background-color: rgba(221, 133, 118, 0.5); visibility: hidden; } .login_input{ position: relative; margin-bottom: 20px; } .login_input i { width: 26px; height: 26px; margin: 1px; position: absolute; left: 0; bottom: 1em; } .login_input i.login_icon_user { background: url(../images/user.png); } .login_input i.login_icon_pass { background: url(../images/lock.png); } .login_input input { background: transparent; border: none; height: 50px; width: 100%; border-bottom: 2px solid rgb(93, 209, 161); font-size: 15px; color: #fff; color: rgb(131, 138, 145); outline: none; } button[type="submit"] { width: 40%; height: 30px; float: right; background-color: rgb(93, 209, 161,0.9); color: #000; border: none; font-size: 16px; font-weight: 600; cursor: pointer; outline: none; } .login_sub_in input:hover { transition: all 0.3s ease; border: 2px solid #fff; } #foot { background: #f7f7f7; color: #999; width: 964px; margin-left: auto; margin-right: auto; } #foot p { font-size: 13px; text-align: center; height: 70px; line-height: 70px; }
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); response.getWriter().write("</br>"); response.getWriter().write("密码:" + 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