一、本案例实现的功能:
- 首页点击注册按钮跳转至注册页面,如注册过,点击登录按钮跳转至登陆页面;
- 注册页面提交表单验证,注册成功跳转至登录页面,两次输入密码不同则注册失败,提示错误信息,重定向至注册页面;
- 登录页面提交表单验证,登陆成功跳转至用户信息页面,用户名或密码输入错误则登录失败,提示错误信息,重定向至登录页面;
- 用户信息页面展示用户数据,点击注销账户,则销毁用户信息,跳转至提示页面;点击返回首页,跳转至首页。
二、源代码及运行截图
(一)目录结构
(二)首页
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1>首页</h1>
<hr>
<%--一个注册的按钮--%>
<a href="${pageContext.request.contextPath}/Register.jsp"><input type="button" value="注册"></a>
<%--一个登录的按钮--%>
<a href="${pageContext.request.contextPath}/Login.jsp"><input type="button" value="登录"></a>
</body>
</html>
首页效果如下:
(三)注册
Register.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script>
<%--sessionScope可获取session属性值--%>
var a = '${sessionScope.wrongPassword}';
if(a=='yes'){
alert("两次输入密码不同,请重新输入!");
}
</script>
</head>
<body>
<h1>注册</h1>
<form action="${pageContext.request.contextPath}/register" method="post">
用户名:<input type="text" name="username" required><br><%--required表示此项为必填项--%>
密码:<input type="password" name="password" required><br>
确认密码:<input type="password" name="confirm-password" required><br>
爱好:<input type="checkbox" name="hobbies" value="女孩">女孩
<input type="checkbox" name="hobbies" value="代码">代码
<input type="checkbox" name="hobbies" value="电影">电影