Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能
阿新 • • 發佈:2018-07-23
next Coding stat tin std 圖片 htm height -c Servlet生成驗證碼並輸出:
@WebServlet(name = "yzmServlet") public class yzmServlet extends HttpServlet { private static final int WIDTH = 100; private static final int HEIGHT = 40; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); BufferedImage image=new BufferedImage(WIDTH,HEIGHT, BufferedImage.TYPE_INT_RGB); Graphics g=image.getGraphics(); //設置背景色 g.setColor(Color.CYAN); //填充背景色 g.fillRect(0,0,WIDTH,HEIGHT); //設置前景色 g.setColor(Color.BLACK); //設置字體 Font font=new Font("仿宋",Font.BOLD,20); g.setFont(font); //獲取驗證碼 int len=4; String result=""; for(int x=0;x<len;x++){ char c=(char) RandomUtils.nextInt(65,91); result=result+c; } g.drawString(result,20,20); //設置幹擾線條 for(int i=0;i<10;i++){ int x1= RandomUtils.nextInt(0,WIDTH); int x2= RandomUtils.nextInt(0,WIDTH); int y1= RandomUtils.nextInt(0,HEIGHT); int y2= RandomUtils.nextInt(0,HEIGHT); Color color=new Color(RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255)); g.setColor(color); //設置線條 g.drawLine(x1,y1,x2,y2); } //將獲取到的驗證碼存儲到Session中 HttpSession session=request.getSession(); session.setAttribute("identifyCode",result); //輸出圖片 BufferedOutputStream bos=new BufferedOutputStream(response.getOutputStream()); ImageIO.write(image,"jpg",bos); //ImageIO.write(image,"jpg",new File("e:\\b.jpg")); bos.flush(); bos.close(); } }
Servlet對登錄界面輸入的昵稱/密碼/驗證碼進行驗證:
@WebServlet(name = "identifyYzmServlet") public class identifyYzmServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); //獲取輸入的用戶名 String username=request.getParameter("username"); //獲取輸入的密碼 String password=request.getParameter("password"); //獲取輸入的驗證碼 String yzm2=request.getParameter("yzm01"); //獲取Session對象中存取的數據 HttpSession session1=request.getSession(); String yzm1=(String)session1.getAttribute("identifyCode"); if(!username.equals("")&&!password.equals("")&&!yzm2.equals("")){ if(username.equals("Bighead")) { if (password.equals("4214963")) { if (yzm1.equals(yzm2)) { response.getWriter().println("登錄成功"); //登錄成功後跳轉到的頁面 //request.getRequestDispatcher("form01.html").forward(request,response); } else { response.getWriter().println("驗證碼有誤,請重新輸入"); } } else { response.getWriter().println("密碼有誤,請重新輸入"); } }else{ response.getWriter().println("昵稱有誤,請重新輸入"); } }else{ response.getWriter().println("昵稱或密碼或驗證碼不能為空,請輸入"); } } }
web-xml進行配置:
-<servlet> <servlet-name>identifyYzmServlet</servlet-name> <servlet-class>com.westos.identifyYzmServlet</servlet-class> </servlet> -<servlet-mapping> <servlet-name>identifyYzmServlet</servlet-name> <url-pattern>/ident</url-pattern> </servlet-mapping> -<servlet> <servlet-name>yzmServlet</servlet-name> <servlet-class>com.westos.untitle2.yzmServlet</servlet-class> </servlet> -<servlet-mapping> <servlet-name>yzmServlet</servlet-name> <url-pattern>/yzm01</url-pattern> </servlet-mapping>
html實現登錄界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style type="text/css">
#login{
border: 1px solid deepskyblue;
background-color: blanchedalmond;
width:400px;
height:250px;
padding-left: 100px;
padding-top: 50px;
}
</style>
<script type="text/javascript">
//用javaScript語言驗證昵稱和密碼
//function check(){
//var name=document.getElementById("nicheng").value;
// var password=document.getElementById("mima").value;
// if(name=="Bighead"&&password=="4214963"){
// alert("登陸成功");
// window.document.login.action="form01.html";
// window.document.login.submit();
// }else{
// alert("密碼或昵稱錯誤,請重新輸入");
// }
// }
function identifyload() {
document.getElementById(‘myyzm‘).src = ‘yzm01‘;
}
</script>
</head>
<body>
<div id="top">
<h1>登錄</h1>
</div>
<div id="login">
<form action="./ident" method="Post" name="login">
昵稱:<input name="username" type="text" placeholder="請輸入昵稱" id="nicheng"/><br/><br/>
密碼:<input name="password" type="password" placeholder="請輸入密碼" id="mima"/><br/><br/>
請輸入驗證碼:<br/>
<img src="./yzm01" height="32" id="myyzm">
<button type="button" value="看不清楚,再來一張" onclick="identifyload()">看不清楚,再來一張</button>
<input name="yzm01" type="text"/><br/>
<button type="submit" value="登錄" >登錄</button>
<button type="reset" value="重置">重置</button>
</form>
</div>
</body>
</html>
Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能