帶驗證碼的登錄效果圖
登錄成功時，記錄用戶名和訪問次數
登錄失敗，彈出錯誤提示
方法一：應用request對象獲取表單數據實現登錄操作
代碼結構：
index.jsp源碼及詳解：
<form name="form1" method="POST" action="check.jsp">
當表單被提交時，數據會被提交到check.jsp中去，此處表單的提交實在js的mycheck()方法中完成的。
String intsum=intmethod+""+intmethod2+intmethod3+intmethod4;此處+""是為了將int數據類型轉為String類型。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登錄頁面</title> </head> <script type="text/javascript"> function mycheck(){//定義mycheck()方法 if(form1.UserName.value==""){ alert("用戶名不能為空！"); form1.UserName.focus(); return; } if(form1.PWD.value==""){ alert("密碼不能為空！"); form1.PWD.focus(); return; } if(form1.yanzheng.value==""){ alert("驗證碼不能為空！"); form1.yanzheng.focus(); return; } form1.submit(); } </script> <body> <form name="form1" method="POST" action="check.jsp"> 用戶名：<input name="UserName" type="text"><br><br> 密 碼：<input name="PWD" type="password"><br><br> 驗證碼：<input name="yanzheng" type="text" size="8"> <% //獲取0~9的隨機數 int intmethod=(int)((((Math.random())*11))-1); int intmethod2=(int)((((Math.random())*11))-1); int intmethod3=(int)((((Math.random())*11))-1); int intmethod4=(int)((((Math.random())*11))-1); //加入""是為了讓int類型轉為String類型。 //int類型和字符串類型相加，為字符串類型. String intsum=intmethod+""+intmethod2+intmethod3+intmethod4; %> <input type="hidden" name="vcode" value="<%=intsum%>"> <img src="num/<%=intmethod%>.gif"> <img src="num/<%=intmethod2%>.gif"> <img src="num/<%=intmethod3%>.gif"> <img src="num/<%=intmethod4%>.gif"> <br> <br> <input name="Submit" type="button" class="submit1" value="登錄" onClick="mycheck()"> <!-- type="reset" 重置表單 --> <input name="Submit2" type="reset" class="submit1" value="重置"> </form> </body> </html>
check.jsp源碼及詳解：
此處有兩種頁面的跳轉方式
- jsp中： response.sendRedirect("main.jsp");
- js中：window.location.href='index.jsp';
使用requst.getParameter("name值")獲取表單提交的數據
使用session.setAttribute("name", name)，是將name保存到session范圍內“name”變量中。
使用session.getAttribute("name")是從name中取出之前保存的數據。
response.sendRedirect("目標路徑");實現頁面的跳轉。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <% //設置編碼方式，防止中文亂碼 request.setCharacterEncoding("UTF-8"); //使用requst.getParameter("")獲取表單提交的數據 String name=request.getParameter("UserName"); String password=request.getParameter("PWD"); String yanzheng=request.getParameter("yanzheng"); String message; if(!yanzheng.equals(request.getParameter("vcode"))){ message="驗證碼輸入有誤"; }else if(name.equals("mr")&&password.equals("123456")){ message="登錄成功"; //將name保存到session范圍內“name”變量中，使用get方法可獲取name session.setAttribute("name", name); //成功頁面跳轉 response.sendRedirect("main.jsp"); }else{ message="用戶名或密碼錯誤！"; } %> <script> alert("<%=message %>"); //在js中實現頁面的跳轉 //當輸入信息有誤時，重新跳轉到登陸界面 window.location.href='index.jsp'; </script> <title>驗證中...</title> </head> <body> </body> </html>
main.jsp的源碼及詳解：
巧妙使用session.setAttribute()和session.getAttribute()實現頁面計數。
session.getAttribute("name").toString()：由於get方法返回的是Object類型，將其賦值給String類型需要進行強制類型轉換或調用toString()方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登錄成功！</title> </head> <body> 用戶名：<%=session.getAttribute("name").toString() %> <%int number=0; if(session.getAttribute("number")==null){ number=1; }else{ number=Integer.parseInt(session.getAttribute("number").toString()); number=number+1; } out.print("您是第"+number+"次訪問"); session.setAttribute("number", number); %> </body> </html>
方法二：應用JavaBean獲取表單數據實現登錄操作
代碼結構
javaBean代碼：
JavaBean規范：
（1）JavaBean 類必須是一個公共類，並將其訪問屬性設置為 public ，如： public class user{ …}
（2）JavaBean 類必須有一個空的構造函數：類中必須有一個不帶參數的公用構造器，例如：public User() {…}
（3）一個javaBean類不應有公共實例變量，類變量都為private ，如： private int id;
( 4 )javaBean屬性是具有getter/setter方法的成員變量。
package com.wgh; public class UserBean { private String name=""; private String pwd=""; private String yanzheng=""; private String vcode=""; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public String getYanzheng() { return yanzheng; } public void setYanzheng(String yanzheng) { this.yanzheng = yanzheng; } public String getVcode() { return vcode; } public void setVcode(String vcode) { this.vcode = vcode; } }
index.jsp源碼
<form name="form1" method="POST" action="check.jsp">
當表單被提交時，數據會被提交到check.jsp中去，此處表單的提交實在js的mycheck()方法中完成的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>正在登錄</title> </head> <script type="text/javascript"> function mycheck(){ if(form1.name.value==""){ alert("用戶名不能為空！"); form1.name.focus(); return; } if(form1.pwd.value==""){ alert("密碼不能為空！"); form1.PWD.focus(); return; } if(form1.yanzheng.value==""){ alert("驗證碼不能為空！"); form1.yanzheng.focus(); return; } form1.submit(); } </script> <body> <form name="form1" method="POST" action="check.jsp"> 用戶名：<input name="name" type="text"><br><br> 密 碼：<input name="pwd" type="password"><br><br> 驗證碼：<input name="yanzheng" type="text" size="8"> <% int intmethod=(int)((((Math.random())*11))-1); int intmethod2=(int)((((Math.random())*11))-1); int intmethod3=(int)((((Math.random())*11))-1); int intmethod4=(int)((((Math.random())*11))-1); String intsum=intmethod+""+intmethod2+intmethod3+intmethod4; %> <input type="hidden" name="vcode" value="<%=intsum%>"> <img src="num/<%=intmethod%>.gif"> <img src="num/<%=intmethod2%>.gif"> <img src="num/<%=intmethod3%>.gif"> <img src="num/<%=intmethod4%>.gif"> <br> <br> <input name="Submit" type="button" class="submit1" value="登錄" onClick="mycheck()"> <input name="Submit2" type="reset" class="submit1" value="重置"> </form> </body> </html>
check.jsp源碼
<jsp:useBean id="user" scope="page" class="com.wgh.UserBean" type="com.wgh.UserBean"> 實例化javaBean對象，對象名為user
<jsp:setProperty name="user" property="*"/> 設置user對象的值，將表單中的數據寫入javabean中去。使用property="*"要保證表單中各元素的name值與javabean中定義的屬性名保持一致。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <jsp:useBean id="user" scope="page" class="com.wgh.UserBean" type="com.wgh.UserBean"> <jsp:setProperty name="user" property="*"/> </jsp:useBean> <title>用戶名與密碼驗證中...</title> </head> <body> <% String yanzheng=user.getYanzheng(); String name=user.getName(); String pwd=user.getPwd(); String vcode=user.getVcode(); String message; if(!yanzheng.equals(vcode)){ message="驗證碼輸入有誤！"; }else if(name.equals("mr")&&pwd.equals("123456")){ message="登陸成功"; session.setAttribute("name", user.getName()); response.sendRedirect("main.jsp"); }else{ message="用戶名或密碼錯誤！"; } %> <script> alert("<%=message%>") window.location.href('index.jsp'); </script> </body> </html>
main.jsp源碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登錄成功！</title> </head> <body> 用戶名：<%=session.getAttribute("name")%> <%int number=0; if(session.getAttribute("number")==null){ number=1; }else{ number=Integer.parseInt(session.getAttribute("number").toString()); number=number+1; } out.print("您是第"+number+"次訪問"); session.setAttribute("number", number); %> </body> </html>