【Java Web基础】(七)注册界面及注册失败后的界面跳转问题
程序员文章站
2022-05-06 16:08:48
...
注册界面及注册失败后的界面跳转问题
贴上整个注册界面的代码:
Register.jsp(注册界面)
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<html>
<head>
<title>User Register</title>
</head>
<body>
<center>
<p style="margin-left: 0px;margin-right: 250px">
<img src="icons/Mine.jpg" style="width: 30px;height:30px">
<font style="font-size: 25px;color: brown">用户注册</font>
</p>
<font style="font-size:11px">欢迎您注册为本网站的会员,请在下面的表单填写信息,要求每项必填,信息 </font><br>
<font style="font-size:11px;margin-left:0px;margin-right: 196px">务必真实,方便我们联系您,谢谢!</font>
<form style="text-align: center" action="success.jsp" method="post" name="RegisterForm">
<center>
<fieldset style="border-style: dashed;width: 350px;align-self: center">
<legend style="background-color: brown;color: white;margin-left: 0px;margin-right: 250px">创建新账户</legend>
<br>
<b>用户名:</b><input type="text" value="" name="Username" style="margin-bottom: 5px;margin-right: 3px"/><br>
<b>密码:</b><input type="password" value="" name="Password" style="margin-bottom: 5px"/><br>
<b>密码确认:</b><input type="password" value="" name="PasswordEnter" style="margin-bottom: 5px;margin-right: 10px"/><br>
<b>电子邮件:</b><input type="text" value="" name="Email" style="margin-bottom: 5px;margin-right: 10px" /><br>
<b>电话:</b><input type="text" value="" name="Tel" style="margin-bottom: 5px;" /><br>
<b>地址:</b><input type="text" value="" name="Address" style="margin-bottom: 5px" /><br>
<input type="checkbox" value="" name="Agree" style="">
<font style="font-size: 13px;color: brown;">我同意</font>
<a href="" style="font-size:13px">相关政策和协议</a>
<input type="submit" value="注册" name="Login" style="background-color: brown;color: white;border-radius: 5px;margin-right: 10px;margin-left: 210px">
</fieldset>
</center>
</form>
</center>
</body>
</html>
success.jsp(注册成功后显示的界面)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<html>
<head>
<title>Success Page</title>
</head>
<body>
<%
String username=request.getParameter("Username");
String password=request.getParameter("Password");
String passwordenter=request.getParameter("PasswordEnter");
String email=request.getParameter("Email");
String tel=request.getParameter("Tel");
String address=request.getParameter("Address");
String agree=request.getParameter("Agree");
if(username.isEmpty()||email.isEmpty()||password.isEmpty()||tel.isEmpty()||address.isEmpty()||agree=="false"||!password.equals(passwordenter))
{
%>
<jsp:forward page="remain.jsp"></jsp:forward>
<%
}
else
{
%>
<center>
<p style="margin-left: 0px;margin-right: 250px">
<img src="icons/Mine.jpg" style="width: 30px;height:30px">
<font style="font-size: 25px;color: brown">注册成功</font>
</p>
<p style="margin-right: 162px;margin-left: 138px;font-size: 11px">欢迎您注册为本网站的会员,您的注册信息如下,请记住您的注册信息!</p>
<form style="text-align: center">
<center>
<fieldset style="border-style: dashed;width: 350px;align-self: center">
<legend style="background-color: brown;color: white;margin-left: 0px;margin-right: 250px">用户注册信息</legend>
<br>
<b>用户名:</b><%=username%><br>
<b>密码:</b><%=password%><br>
<b>电子邮件:</b><%=email%><br>
<b>电话:</b><%=tel%><br>
<b>地址:</b><%=address%><br>
<a href="login.jsp" style="margin-top: 5px;">返回首页</a>
</fieldset>
</center>
</form>
</center>
<%
}
%>
</body>
</html>
remain.jsp(注册失败显示提示信息的界面,有计时功能,即倒计时x s后进入xx界面)
<html>
<head>
<title>提示!</title>
<script type="text/javascript">
var time = 5;
function returnUrlByTime() {
window.setTimeout('returnUrlByTime()', 1000);
time = time - 1;
document.getElementById("layer").innerHTML = time;
}
</script>
</head>
<body οnlοad="returnUrlByTime()">
<h3>您可能存在以下问题,导致注册失败:</h3>
<p>
1、有信息未填入<br>
2、未同意相关政策及协议<br>
3、密码与确认密码内容不相同<br>
请仔细检查您的信息并重新填写
</p>
<b><span id="layer">5</span>秒后,转入注册界面。</b>
<%
//转向语句
response.setHeader("Refresh", "5;URL=Register.jsp");
%>
</body>
</html>
效果如下:
注册界面:
注册成功界面:
注册失败实例(密码为空):
注册失败结果:
这个界面设置了计时器,可以实现5s后跳转,可以尝试一下,也可以修改其他秒数跳转。
小结:
制作这个界面其实不是很困难,我还遇到一个问题就是转入注册成功界面后中文显示乱码,解决办法如下:
解决jsp乱码问题