登陆页面设计

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登陆页面</title>
 6     <style type="text/css">
 7         body{
 8             font:12px/1.5 微软雅黑,宋体;
 9         }
10         .container{
11             margin: 200px auto 0px auto;
12             width: 320px;
13         }
14         span{
15             color: red;
16         }
17     </style>
18     <script type="text/javascript">
19         function testMethod1(userName) {
20             try{
21                 var txtNode = userName.value;
22                 var spanNode = document.getElementById("spanName");
23                 if(txtNode == ""){
24                     spanNode.style.display = "inline";
25                     spanNode.innerHTML = "用户名不能为空";
26                 }
27             }catch (err){
28                 alert(err);
29             }
30         }
31         function testMethod2(password) {
32             try{
33                 var txtNode = password.value;
34                 var spanNode = document.getElementById("spanPassword");
35                 if(txtNode == ""){
36                     spanNode.style.display = "inline";
37                     spanNode.innerHTML = "密码不能为空";
38                 }
39             }catch (err){
40                 alert(err);
41             }
42         }
43         function reset() {
44             document.getElementById("userName").value = "";
45             document.getElementById("password").value = "";
46         }
47         function test() {
48             document.getElementById("spanName").style.display = "none";
49         }
50         function test2() {
51             document.getElementById("spanPassword").style.display = "none";
52         }
53     </script>
54 </head>
55 <body>
56     <div class="container">
57         <form action="login.html" method="post">
58             <table>
59                 <tr>
60                     <td>用户名：</td>
61                     <td><input type="text" id="userName" onblur="testMethod1(this)" onfocus="test()"/></td>
62                     <td><span id="spanName"></span></td>
63                 </tr>
64                 <tr>
65                     <td>密&nbsp;&nbsp;码：</td>
66                     <td><input type="password" id="password" onblur="testMethod2(this)" onfocus="test2()"/></td>
67                     <td><span id="spanPassword"></span></td>
68                 </tr>
69                 <tr>
70                     <td>
71                         <button type="button" onclick="reset()">重置</button>
72                     </td>
73                     <td>
74                         <button type="submit">登陆</button>
75                     </td>
76                     <td></td>
77                 </tr>
78             </table>
79         </form>
80     </div>
81 </body>
82 </html>