Web开发技术---简单的登录验证

时间:2023-03-09 19:24:43
Web开发技术---简单的登录验证

制作一个APP或系统最基础的是登录界面,下面通过一个简单的登录注册界面的程序,来熟练掌握Web开发的技术。

一、知识点:

1.在网页界面获取用户的输入信息

2.标签的基本应用

3.用户输入结果的错误提示

4.在处理输入错误时,对用户的输入结果进行保留显示及对应错误栏清空。

二、标签

<form>该标签为表单标签,用于形成标签</form>

<input>该标签为输入标签,具体的使用根据定义的属性显示,具体参考文章源代码的注释

<selsct>下拉框标签</select>

三、Web内置对象的使用

1.获取网页用户输入信息request.getParameter();

2.转发网页request.getRequestDispatcher("注册页.jsp").forward(request, response);

3.接收网页转发request.getAttribute();

四、源代码解析

1.注册页.jsp

该文件代码用于生成用户输入界面的输入表单,并接收注册界面.jsp文件转发过来的错误处理提示。

1.1输入表单的源代码

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>个人信息</h1>
<form action="注册界面.jsp">
用户:<input type="text" name="username" <%if(n!=null){%> value="<%=n%>" <%}%>/>
<%
//出错处理
if(error !=null && error.equals("用户名未输入"))
{
out.println(error);
// out.println("<font color="red">"+error+"</font>");
}
%>
<br> <br>
邮箱:<input type="text" name="email" value="123456789@qq.com"/>
<%
if(error1 !=null)
{
out.println(error1);
// out.println("<font color="red">"+error+"</font>");
}
%>
<br> <br>
密码:<input type="password" name="password"/>
<%
if(error2 !=null)
{
out.println(error2);
// out.println("<font color="red">"+error+"</font>");
}
%>
<br><br>
确认密码:<input type="password" name="password1"/>
<%
if(error3 !=null)
{
out.println(error3);
// out.println("<font color="red">"+error+"</font>");
}
%>
<%
if(error4 !=null)
{
out.println(error4);
// out.println("<font color="red">"+error+"</font>");
}
%>
<br> <br>
性别:
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女 <br><br>
<!--复选框-->
爱好:
<input type="checkbox" name="1" value="音乐"/>音乐
<input type="checkbox" name="1" value="美术"/>美术
<input type="checkbox" name="1" value="动漫"/>动漫
<input type="checkbox" name="1" value="电竞"/>电竞
<input type="checkbox" name="1" value="编程"/>编程
<br><br>
<!--下拉框:-->
班级:<select name="class">
<option value="1701班">1701班</option>
<option value="1702班">1702班</option>
<option value="1703班">1703班</option>
<option value="1704班">1704班</option>
<option value="1705班">1705班</option>
<option value="1706班">1706班</option>
<option value="1707班">1707班</option> </select> <br>
<p>个人说明:</p>
<textarea name="p"rows="4" cols="20">填写个人说明</textarea>
<br><br>
<input type="reset"value="重置">
<input type="submit"value="提交">
<br><br>
</form> </body>
</html>

1.1.1运行结果

Web开发技术---简单的登录验证

 1.2接收错误处理信息的代码

 <%@page import="java.net.URLEncoder"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
//接收
String error =(String)request.getAttribute("error");
String error1 =(String)request.getAttribute("error1");
String error2 =(String)request.getAttribute("error2");
String error3 =(String)request.getAttribute("error3");
String error4 =(String)request.getAttribute("error4");
String n =(String)request.getAttribute("n"); %>

2.注册界面.jsp

该文件代码用于输出获得的用户输入信息,并对获取的信息进行错误处理,把处理结果转发至用户输入界面。

2.1输出信息页面代码

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>个人信息</h1> 用户:<%=name%>
<br><br>
邮箱:<%=email%>
<br><br>
密码:<%=password%>
<br><br>
确认密码:<%=password1%>
<br><br>
班级:<%=banji%>
<br><br>
爱好:<%for(int i = 0;i<str.length;i++){%>
<%=str[i]%>
<%}%> <br><br>
个人说明:<%=request.getParameter("p")%>
</body>
</html>

2.1.1运行结果

Web开发技术---简单的登录验证

用户界面提交信息后的显示界面 :

Web开发技术---简单的登录验证

2.2错误处理代码

在这里只举出部分错误处理的例子,供读者对该知识的理解。该代码应该与注册页.jsp的代码联合,方便解读。

 <%
request.setCharacterEncoding("UTF-8");
//接收用户输入信息
String n=request.getParameter("username");
String p=request.getParameter("password");
String p1=request.getParameter("password1"); if(n.equals("")){
request.setAttribute("error", "用户名未输入");
request.getRequestDispatcher("注册页.jsp").forward(request, response);
}
else if(request.getParameter("email").equals(""))
{
//用于在出现错误处理时,用户输入的信息仍然保存,并显示
request.setAttribute("n", n);
request.setAttribute("p", p);
request.setAttribute("p1", p1);
request.setAttribute("error1", "邮箱未输入");
request.getRequestDispatcher("注册页.jsp").forward(request, response); } else if(request.getParameter("password").equals(""))
{
request.setAttribute("n", n);
request.setAttribute("error2", "密码未输入");
request.getRequestDispatcher("注册页.jsp").forward(request, response); }
else if(request.getParameter("password1").equals(""))
{
request.setAttribute("n", n);
request.setAttribute("p", p);
request.setAttribute("error3", "确认密码未输入");
request.getRequestDispatcher("注册页.jsp").forward(request, response); }
else if(request.getParameter("password1")!=request.getParameter("password"))
{
request.setAttribute("n", n);
request.setAttribute("p", p);
request.setAttribute("error4", "确认密码与密码不一致!");
request.getRequestDispatcher("注册页.jsp").forward(request, response);
} %>

2.2.1部分运行结果如下:

用户名未输入:

Web开发技术---简单的登录验证

密码未输入:

Web开发技术---简单的登录验证

确认密码未输入:

Web开发技术---简单的登录验证

密码与确认密码不一致:

Web开发技术---简单的登录验证

 3.小扩展

在程序中插入调用当前时间的函数代码,记录注册的时间

3.1时间代码

 <%
// 代码块
Date date = new Date();
SimpleDateFormat simpledate = new SimpleDateFormat("yyyy年MM月dd日 E HH 点mm分ss秒");
String strDate = simpledate.format(date); %>

3.2显示时间

 注册时间:<%=date%>
<br>
<%=strDate%>

4.完整运行成功后的结果

Web开发技术---简单的登录验证