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>