1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8 <html>
9 <head>
10 <base href="<%=basePath%>">
11
12 <title>My JSP 'login.jsp' starting page</title>
13
14 <meta http-equiv="pragma" content="no-cache">
15 <meta http-equiv="cache-control" content="no-cache">
16 <meta http-equiv="expires" content="0">
17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18 <meta http-equiv="description" content="This is my page">
19 <!--
20 <link rel="stylesheet" type="text/css" href="styles.css">
21 -->
22 <script>
23 function rcheck(){
24 var name=document.getElementById("name").value;
25 var pwd=document.getElementById("pwd").value;
26 var check=document.getElementById("check");
27 if(name!=""){
28 if(name.length>=2){
29 if(pwd!=""){
30 if(pwd.length>=6){
31 check.innerHTML="<strong style='color:red'>恭喜您注冊成功</strong>"
32 }else{
33 check.innerHTML="<strong style='color:red'>密碼不能小于6位數</strong>"
34 }
35 }else{
36 check.innerHTML="<strong style='color:red'>密碼不能為空</strong>"
37 }
38 }else{
39 check.innerHTML="<strong style='color:red'>賬号長度必須大于1位</strong>"
40 }
41 }else{
42 check.innerHTML="<strong style='color:red'>賬号不能為空</strong>"
43 }
44 }
45
46 function check(){
47 var name=document.getElementById("name").value;
48 var pwd=document.getElementById("pwd").value;
49 var check=document.getElementById("check");
50 if(name.length==0||pwd.length==0){
51 check.innerHTML="<strong style='color:red'>賬号或密碼不能為空</strong>"
52 }else{
53 document.forms[0].submit();
54 }
55 }
56 </script>
57
58 <style type="text/css">
59
60 *{
61 margin: 0;
62 padding: 0;
63 }
64
65 body{
66 height:100%;
67 width:100%;
68 background-image: url(img/background.JPG);
69 background-repeat:contain;
70
71 }
72 #div{
73 border:1px solid black;
74 height:200px;
75 width:300px;
76 background-color: rgba(0,0,0,0.5);
77 border-radius:20px;
78 margin: 200px auto;
79
80
81 }
82 table{
83 height:100%;
84 width:100%;
85 padding-top:10px;
86 padding-bottom: 30px;
87 color:white;
88 font-family: sans-serif;
89 font:bolder;
90 }
91 .res{
92 width: 100px;
93 height:30px;
94 background-color: orange;
95 border: 0px;
96 border-radius:5px;
97 color: white;
98 }
99 .login{
100 width: 100px;
101 height:30px;
102 background-color: green;
103 border: 0px;
104 border-radius:5px;
105 color: white;
106 cursor: pointer;
107 }
108 input {
109 width: 200px;
110 height:30px;
111 border-radius:5px;
112 border: 0px;
113 cursor: pointer;
114 }
115 #check{
116 width: 200px;
117 height:30px;
118 margin: -200px 700px;
119 }
120 </style>
121 </head>
122
123 <body>
124 <div id="div">
125 <form action="loginCheck" method="post">
126 <table style="text-align: center;">
127 <caption>歡迎來到辦公系統</caption>
128 <tr>
129 <td>
130 賬戶:<input type="text" name="userName" placeholder="請輸入賬戶名" id="name" style="padding-left: 10px">
131 </td>
132 </tr>
133 <tr>
134 <td>
135 密碼:<input type="password" name="userPwd" placeholder="請輸入賬戶密碼" id="pwd" style="padding-left: 10px">
136 </td>
137 </tr>
138 <tr>
139 <td colspan="2" valign="bottom">
140 <input type="button" value="登入" class="login" onclick="check()" >
141 </td>
142 </tr>
143 <tr>
144 <td colspan="2" valign="center" >
145 <input type="button" value="注冊" class="res" onclick="rcheck()">
146 </td>
147 </tr>
148
149 </table>
150 </form>
151 </div>
152
153 <div id="check"></div>
154
155 </body>
156 </html>
