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-zA-0-9u4E00-u9FA5]/g,'')" 输入时判断是否为中文，英文，数字 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-0-9u4E00-u9FA5]/g,''))"粘贴时判断 --> 36 <td><input type="text" name="username" id="username" οninput="value=value.replace(/[^a-zA-0-9u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-0-9u4E00-u9FA5]/g,''))"></td> 37 </tr> 38 <tr> 39 <td>密   码：</td> 40 <!-- 只能输入是否为英文，数字 --> 41 <td><input type="password" name="password" id="password" οninput="value=value.replace(/[^a-zA-0-9]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-0-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 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 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 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>