1. 用戶登錄
實現用戶登錄，功能，三個頁面登錄頁面login.jsp,登錄邏輯處理頁面loginSubmit.jsp，歡迎頁面welcome.jsp.用戶再登錄頁面輸入用戶名和密碼，前台頁面使用js或者jQuery進行驗證，如果用戶名或密碼為空，則提示用戶輸入用戶名和密碼;如果用戶名為”admin”，密碼為”123”,則登錄成功跳轉至歡迎頁面,歡迎頁面顯示當前用戶登錄的用戶名，例如:“歡迎張三登錄XXX”,如果失敗，停留再登錄頁面，並在用戶名輸入框顯示用戶名，頁面給出相應的錯誤提示。
2.用戶注冊
注冊: 注冊頁面register.jsp,注冊信息頁面registerinfo.jsp,用戶在注冊頁面輸入用戶名，密碼，郵箱，地址，年齡后點擊注冊按鈕，前台頁面使用js或者jQuery進行驗證，如果用戶名，密碼，確認密碼,郵箱等為空或者格式不正確，繼續保留在注冊頁面，若果驗證都通過，頁面跳轉到注冊信息頁面並顯示注冊的信息。要求用戶名, 地址為中文輸入，中文顯示(在jsp頁面解決中文亂碼問題,注:用戶名必要由字母開頭以及和中文組成，長度不小於6位，密碼長度不小於8位，密碼和重復密碼必須一致才能注冊成功，郵箱必須符合郵箱格式，否則驗證不通過，年齡必須是整數。)
3.注銷功能
在歡迎頁面點擊 “注銷”按鈕，實現注銷功能，也就是退出當前用戶登錄，跳轉到登錄頁面。
注: 1.請注意界面美觀，<input>表單以及控件擺放整齊
2.請注意代碼的書寫，命名符合規范，在代碼中添加必要的注釋
1.注冊頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>注冊頁面</title> <style type="text/css"> form { text-align: center; } </style> <script src="js/jQuery1.11.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#register").click(function() { return checkname() && checkpwd() && checkEmail()&& checkAge() && Address(); }); }); //用戶名 function checkname() { var name = $("#name").val(); if (name == "") { alert("用戶名不能為空！"); return false; } var reg=/^(\d*\w+){4,18}$/; if(!reg.test(name)){ alert("用戶名格式不正確!"); return false; } return true; }; //密碼 function checkpwd() { var password = $("#pwd").val(); if (password == "") { alert("密碼不能為空!"); return false; } if (password.length < 6 || password.length > 8) { alert("密碼長度為6-8"); return false; } return true; }; //電子郵箱 function checkEmail() { var email = $("#email").val(); if (email == "") { alert("郵箱不能為空!"); return false; } var reg = /^\w+@\w+\.\w+$/; if (!reg.test(email)) { alert("郵箱格式不正確!"); return false; } return true; }; //年齡 function checkAge() { var age = $("#Age").val(); if (age == "") { alert("年齡不能為空!"); return false; } return true; }; //地址 function Address() { var address = $("#address").val(); if (address == "") { alert("地址不能為空!"); return false; } var reg=/^[\u2E80-\u9FFF]+$/; if(!reg.test(address)){ alert("地址格式不正確!"); return false; } return true; }; </script> </head> <body> <form method="post" action="registerinfo.jsp"> 用戶名:<input name="username" id="name" /><br /> 密碼:<input name="userpwd" type="password" id="pwd" /><br /> 確認密碼：<input name="pwd" type="password" id="cui" /><br /> 郵箱:<input name="email" id="email" /><br /> 地址:<input name="address" id="address" /><br /> 年齡:<input name="Age" id="Age" /><br /> <input type="submit" value="注冊" id="register" /> </form> </body> </html>
2.注冊信息頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>注冊信息頁面</title> </head> <body> <% request.setCharacterEncoding("UTF-8"); String name = request.getParameter("username"); String pwd = request.getParameter("userpwd"); String mailbox = request.getParameter("email"); String address = request.getParameter("address"); String Age = request.getParameter("Age"); %> 用戶名：<%=name%><br /> 密碼：<%=pwd%><br /> 郵箱：<%=mailbox%><br /> 地址:<%=address%><br /> 年齡：<%=Age%><br /> </body> </html>
3.歡迎頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>歡迎頁面</title> </head> <body> <% String name = request.getParameter("username"); %> 歡迎<%=name%>登陸本頁面 <a href="loginDown.jsp">注銷</a> </body> </html>
4.邏輯處理頁面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>邏輯處理頁面</title>
</head>
<body>
<%
//亂碼處理
request.setCharacterEncoding("UTF-8"); String name = request.getParameter("username"); String pwd = request.getParameter("userpwd"); if ("admin".equals(name) && "123".equals(pwd)) { request.setAttribute("uname", name); request.getRequestDispatcher("welcome.jsp").forward(request, response); } else { session.setAttribute("uname", name); request.getRequestDispatcher("login.jsp").forward(request, response); } %> </body> </html>
5.Insert title here
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <style type="text/css"> form { text-align: center; } </style> <script src="js/jQuery1.11.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#cui").click(function() { var u = document.getElementById("#email"); if (u.validitty.valueMissing == true) { u.setCustomValidity("用戶名不能為空"); } }); $("#cui").click(function() { var d = document.getElementById("#pwd"); if (d.validitty.valueMissing == true) { d.setCustomValidity("密碼不能為空"); } }); }); </script> </head> <body> <form method="post" action="loginSubmit.jsp"> 用戶名:<input name="username" id=email /><br /> 密碼:<input name="userpwd" type="password" id="pwd" /><br /> <input type="submit" value="登錄" id="cui" /> <a href="register.jsp">注冊 </a> </form> </body> </html>
6.注銷頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>注銷頁面</title> </head> <body> <% session.removeAttribute("uname"); response.sendRedirect("login.jsp"); %> </body> </html>