login.html

　　这个题的登录页面有点复杂，；以前做的登录页面都是简单粗暴的，没有CSS，也没有对输入做过多的限制，

这个题目要求比较多，所以CSS和JavaScript都要用到，现在我还不太能理解这个代码，要慢慢来

  1 <html>
  2 <head>
  3     <title>登陆</title>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5     <style type="text/css">
  6         <!--
  7         body {
  8             margin-left: 0px;
  9             margin-top: 0px;
 10             margin-right: 0px;
 11             margin-bottom: 0px;
 12             background-image: url(login/loginbg.jpg);
 13             background-repeat: repeat-x;
 14         }
 15         -->
 16     </style>
 17     <script type="text/javascript" src="js/jquery-1.4.js"></script>
 18     <script type="text/javascript" src="login/refresh.js"></script>
 19     <!-- 回车换行 -->
 20     <script language="javascript" for="document" event="onkeydown">
 21 
 22         if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')
 23 
 24             event.keyCode=9; //Tab的键值为9 Enter的键值为13
 25 
 26     </script>
 27 
 28     <script type="text/javascript">
 29 
 30         function test()
 31         {
 32             alert("如果丢失密码，请与0311-85813216电话联系！");
 33         }
 34     </script>
 35     <script type="text/javascript">
 36         function MM_swapImgRestore() { //v3.0
 37             var i, x, a = document.MM_sr;
 38             for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++)
 39                 x.src = x.oSrc;
 40         }
 41         function MM_preloadImages() { //v3.0
 42 
 43 
 44             var d = document;
 45             if (d.images) {
 46                 if (!d.MM_p)
 47                     d.MM_p = new Array();
 48                 var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
 49                 for (i = 0; i < a.length; i++)
 50                     if (a[i].indexOf("#") != 0) {
 51                         d.MM_p[j] = new Image;
 52                         d.MM_p[j++].src = a[i];
 53                     }
 54             }
 55         }
 56 
 57         function MM_findObj(n, d) { //v4.01
 58             var p, i, x;
 59             if (!d)
 60                 d = document;
 61             if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
 62                 d = parent.frames[n.substring(p + 1)].document;
 63                 n = n.substring(0, p);
 64             }
 65             if (!(x = d[n]) && d.all)
 66                 x = d.all[n];
 67             for (i = 0; !x && i < d.forms.length; i++)
 68                 x = d.forms[i][n];
 69             for (i = 0; !x && d.layers && i < d.layers.length; i++)
 70                 x = MM_findObj(n, d.layers[i].document);
 71             if (!x && d.getElementById)
 72                 x = d.getElementById(n);
 73             return x;
 74         }
 75 
 76         function MM_swapImage() { //v3.0
 77             var i, j = 0, x, a = MM_swapImage.arguments;
 78             document.MM_sr = new Array;
 79             for (i = 0; i < (a.length - 2); i += 3)
 80                 if ((x = MM_findObj(a[i])) != null) {
 81                     document.MM_sr[j++] = x;
 82                     if (!x.oSrc)
 83                         x.oSrc = x.src;
 84                     x.src = a[i + 2];
 85                 }
 86         }
 87         function realodpage(){
 88             //alert(document.getElementById("shuaxin").src);
 89             $("#shuaxin").attr("src","login/randCode.jsp?"+Math.random());
 90         }
 91         function re(){
 92             setTimeout("realodpage()",10);
 93         }
 94         re();
 95     </script>
 96 </head>
 97 <body bgcolor="#FFFFFF"
 98       onLoad="MM_preloadImages('login/login000_06.jpg','login/loging000_07.jpg')">
 99 <!-- Save for Web Slices (待切.psd) -->
100 <table width="795" height="475" border="0" align="center"
101        cellpadding="0" cellspacing="0" id="__01">
102     <tr>
103         <td colspan="5"><img src="login/login_01.jpg" width="795"
104                              height="159" alt=""></td>
105     </tr>
106     <tr>
107         <td rowspan="2"><img src="login/login_02.jpg" width="269"
108                              height="174" alt=""></td>
109         <td bgcolor="#CFE5F2"><img src="login/login_03.jpg" width="66"
110                                    height="115" alt=""></td>
111         <td colspan="2" bgcolor="#D0E6F3"><table width="100%"
112                                                  height="116" border="0" cellpadding="0" cellspacing="0">
113             <tr>
114                 <td colspan="2" align="left" valign="bottom"><INPUT
115                         NAME="LoginName" TYPE="text" CLASS="STYLE1"
116                         STYLE="width: 180px; height: 17px; border: #336699 1px solid"
117                         tabindex="1" MAXLENGTH="26" id="username"></td>
118             </tr>
119             <tr>
120                 <td height="32" colspan="2" align="left" valign="bottom"><INPUT
121                         NAME="LoginName" TYPE="password" CLASS="STYLE1"
122                         STYLE="width: 180px; height: 17px; border: #336699 1px solid"
123                         tabindex="1" MAXLENGTH="26" id="userpassword"></td>
124             </tr>
125             <tr>
126                 <td width="50%" height="29" align="left" valign="bottom"><INPUT
127                         NAME="LoginName" TYPE="text" CLASS="STYLE1"
128                         STYLE="width: 100px; height: 17px; border: #336699 1px solid"
129                         tabindex="1" MAXLENGTH="26" id="randcode"></td>
130                 <td width="50%" align="left" valign="bottom"><img
131                         src="login/randCode.jsp" id='shuaxin' width="50" height="25">
132                 </td>
133             </tr>
134             <tr>
135                 <td height="30" colspan="1" align="left" valign="bottom">&nbsp;</td>
136             </tr>
137         </table></td>
138         <td rowspan="2"><img src="login/login_05.jpg" width="262"
139                              height="174" alt=""></td>
140     </tr>
141     <tr>
142         <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()"
143                            onMouseOver="MM_swapImage('Image12','','login/loging000_06.jpg',1)"><img
144                 src="login/login_06.jpg" name="Image12" width="135" height="59"
145                 border="0" onClick="IMG1_onclick2()"></a></td>
146         <td><a href="#" onMouseOut="MM_swapImgRestore()"
147                onMouseOver="MM_swapImage('Image13','','login/loging000_08.png',1)"><img
148                 src="login/login_09.png" name="Image13" width="129" height="59"
149                 border="0" onClick="window.location='register.html'"></a></td>
150     </tr>
151     <tr>
152         <td colspan="5"><img src="login/login_08.jpg" alt="" width="795"
153                              height="141" border="0" usemap="#Map"></td>
154     </tr>
155     <tr>
156         <td><img src="login/&#x5206;&#x9694;&#x7b26;.gif" width="269"
157                  height="1" alt=""></td>
158         <td><img src="login/&#x5206;&#x9694;&#x7b26;.gif" width="66"
159                  height="1" alt=""></td>
160         <td><img src="login/&#x5206;&#x9694;&#x7b26;.gif" width="69"
161                  height="1" alt=""></td>
162         <td><img src="login/&#x5206;&#x9694;&#x7b26;.gif" width="129"
163                  height="1" alt=""></td>
164         <td><img src="login/&#x5206;&#x9694;&#x7b26;.gif" width="262"
165                  height="1" alt=""></td>
166     </tr>
167     <tr>
168         <td colspan="5" align="center">
169             <a href="download/Browser.zip">浏览器兼容问题说明</a>
170         </td>
171     </tr>
172 </table>
173 <!-- End Save for Web Slices -->
174 
175 <map name="Map"><area shape="rect" coords="484,16,558,34" href="#"  onclick="test()" target="_self">
176 </map></body>
177 <script type="text/javascript">
178     function IMG1_onclick2() {
179         var user = document.getElementById("username");
180         var pwd = document.getElementById("userpassword");
181         var randcode = document.getElementById("randcode");
182         var url = "dengluServlet?user=" + escape(user.value) + "&pwd="
183             + escape(pwd.value) + "&randcode=" + escape(randcode.value);
184         if (user.value == "") {
185             alert("用户名不能为空");
186 
187         } else if (pwd.value == "") {
188             alert("密码不能为空");
189 
190         } else if (randcode.value == "") {
191             alert("验证码不能为空");
192 
193         } else if (user.value.length > 20 || user.value.length < 6) {
194             alert("用户名小于6位或大于20位");
195 
196         } else if (pwd.value.length > 20 || pwd.value.length < 6) {
197             alert("密码小于6位或大于20位");
198 
199         } else if (!isNum(randcode.value)) {
200             alert("验证码只能由数字组成!");
201             randcode.value = "";
202         } else if (CheckCode(user.value) && CheckCode(pwd.value)
203             && CheckCode(randcode.value)) {
204             alert("有特殊字符请重新填写！");
205             user.value = "";
206             pwd.value = "";
207             randcode.value = "";
208         }else {
209             window.location.href = url;
210         }
211     }
212     function CheckCode(s) //有特殊字符为true
213     {
214         var containSpecial = RegExp(/[(\ )(\~)(\!)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
215         return (containSpecial.test(s));
216     }
217     function isNum(str){
218         for (ilen = 0; ilen < str.length; ilen++) {
219             if (str.charAt(ilen) < '0' || str.charAt(ilen) > '9') {
220                 return false;
221             }
222         }
223         return true;
224     }
225 </script>
226 </html>

 

posted @ 2022-03-10 13:28  SHINIAN200  阅读(828)  评论(0)    收藏  举报