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>密 码：</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>
