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>