JSP:session的使用方法。3月31日

login.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3     <% int random; %>
 4     <% String code; %>
 5     <%! int forsize; %>
 6     <!-- 导航栏数组 -->
 7     <%! String arr[]={"主页","风","花","雪","月"};%>
 8     <%! String brr[]={"main","wind","flower","snow","moon"};%>
 9     <% random=(int)Math.floor(Math.random()*9000+1000);%>
10 <!DOCTYPE html>
11 <html>
12 <head>
13 <meta charset="UTF-8">
14 <title>欢迎登录我的家园</title>
15 <link rel="stylesheet" type="text/css" href="login.css">
16 </head>
17 <body>
18     <!-- 导航 -->
19     <ul>
20         <%for(forsize = 0;forsize <=4;forsize++){%>
21             <% String text=arr[forsize]; %>
22             <% String textb=brr[forsize]; %>
23             <li><a href="#<%= textb%>"><%= text%></a></li><%
24         }%>
25         <li style="float:right"><a class="active" href="#help">帮助</a></li>
26     </ul>
27     <!-- 主界面 -->
28     <!-- 登陆表单 -->
29     <div class="weizhi">
30         <form action="onlogin.jsp" method="post" class="form" onSubmit="return upcode()">
31         <!-- return 函数获得返回值判断是否跳转 -->
32         <table>
33         <tr>
34         <td>用户名:</td>
35         <!--οninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 输入时判断是否为中文,英文,数字 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''))"粘贴时判断 -->
36         <td><input type="text" name="username" id="username" οninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''))"></td>
37         </tr>
38         <tr>
39         <td>密&nbsp&nbsp&nbsp码:</td>
40         <!-- 只能输入是否为英文,数字 -->
41         <td><input type="password" name="password" id="password" οninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-\z\A-\Z0-9]/g,''))"/></td>
42         </tr>
43         <tr>
44         <td>输入验证码:</td>
45         <!--οninput="value=value.replace(/[^\d]/g,'')" 输入时判断是否为数字 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"粘贴时判断 -->
46         <td><input type="text" name="yanzheng" id="yanzheng" οninput="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/></td>
47         </tr>
48         <tr>
49         <td><input type="button" name="send" value="验证码:"/></td>
50         <td><input type="text" name="code" id="code" value="<%=random %>" readonly="readonly"/></td>
51         </tr>
52         <p class="up"><input type="submit" name="up" value="提交"/></p>
53         </table>
54     </form>
55     </div>
56     <!-- 底部栏 -->
57 </body>
58 <!-- 判断验证码是否正确 -->
59 <script>
60     function upcode(){
61         var a = document.getElementById("yanzheng");//获取用户输入的验证码
62         var b = document.getElementById("code");//获取系统生成的验证码
63         var u = document.getElementById("username");
64         var p = document.getElementById("password");
65         if(parseInt(a.value)==parseInt(b.value)&&u.value=="zs"&&p.value=="123"){
66             alert("验证通过!");
67             return true;
68         }else{
69             alert("验证未通过!");
70             return false;
71         }
72     }
73 </script>
74 <%
75     session.setAttribute("rand", random);
76 %>
77 </html>

login.css

 1 @charset "UTF-8";
 2 body {
 3     margin:0;
 4     height:1080;
 5     width:1920;
 6     background-image:url(beijing.png);
 7     background-repeat:no-repeat;
 8 }
 9 
10 ul {
11   list-style-type: none;
12   margin: 0;
13   padding: 0;
14   overflow: hidden;
15   background-color: #333;
16   position: fixed;
17   top: 0;
18   width: 100%;
19 }
20 
21 li {
22   float: left;
23 }
24 
25 li a {
26   display: block;
27   color: white;
28   text-align: center;
29   padding: 14px 16px;
30   text-decoration: none;
31 }
32 
33 li a:hover:not(.active) {
34   background-color: #111;
35 }
36 
37 p {
38     text-align:center;
39 }
40 
41 
42 .active {
43   background-color: #4CAF50;
44 }
45 
46 .form {
47     width:350px;
48     height:200px;
49     background-color:rgba(1,0,1,0.5);
50 }
51 
52 .weizhi {
53     position:relative;
54     top:200px;
55     left:610px;
56 }
57 .up {
58     position: relative;
59     top:150px;
60 }

onlogin.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3     <%
 4         int random = (int)session.getAttribute("rand");
 5         String name = request.getParameter("username");
 6     %>
 7 <!DOCTYPE html>
 8 <html>
 9 <head>
10 <meta charset="UTF-8">
11 <title>登陆成功</title>
12 </head>
13 <body>
14 <ul>
15 <li>
16 <p>
17 <b>用户名:</b>
18  <%=name%>
19 </p>
20 </li>
21 </ul>
22 </body>
23 </html>

 

上一篇:html中节点的常用属性和方法


下一篇:2022年踏板垃圾箱市场前景分析及研究报告