用js在前台界面进行账户密码的检测，账户和密码符合要求后可进行登录

最新推荐文章于 2023-01-30 11:37:05 发布

weixin_30484739

最新推荐文章于 2023-01-30 11:37:05 发布

阅读量929

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/ztt0918/p/8252775.html

版权

  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>