标签：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #wrap{ 12 width: 600px; 13 height: 400px; 14 margin: 40px auto; 15 background-color: aquamarine; 16 border: 1px solid aquamarine ; 17 } 18 #form1{ 19 /*border: 1px solid red;*/ 20 margin: auto; 21 text-align: center; 22 } 23 #button{ 24 width: 240px; 25 height: 25px; 26 border: none; 27 } 28 29 </style> 30 </head> 31 <body> 32 <div id="wrap"> 33 34 <form action="" method="get" name="form1" id="form1" onsubmit="return check()"> 35 <h3>用户考试登录</h3><br/> 36 <label for="username">用户名:</label><input type="text" name="username" id="username"/><span id="user"></span><br/><br/> 37 <label for="password">密 码:</label><input type="text" name="password" id="password"/><span id="pass"></span><br/><br/> 38 <input type="submit" id="button" value="登录"/> 39 </form> 40 41 </div> 42 </body> 43 </html> 44 <script> 45 var wrap = document.getElementById("wrap"); 46 var form = document.getElementById("form1"); 47 var utxt = document.form1.username; 48 var ptxt = document.form1.password; 49 var user = document.getElementById("user"); 50 var pass = document.getElementById("pass"); 51 52 // alert(form.offsetHeight); 53 form.style.marginTop = parseInt(wrap.offsetHeight - form.offsetHeight)/2 +"px"; 54 55 utxt.onblur = function(){ 56 var reg = /^[a-zA-Z]$/; 57 var obj = reg.test(utxt.value); 58 // alert(obj); 59 if(obj){ 60 user.innerHTML = "√"; 61 return true; 62 }else{ 63 user.innerHTML = "×"; 64 return false; 65 } 66 }; 67 ptxt.onblur = function(){ 68 var reg = /^[a-zA-Z0-9]$/; 69 var obj = reg.test(ptxt.value); 70 if(obj){ 71 pass.innerHTML = "√"; 72 return true; 73 }else{ 74 pass.innerHTML = "×"; 75 return false; 76 } 77 }; 78 function check(){ 79 if(!utxt.onblur()&&!ptxt.onblur()){ 80 return false; 81 } 82 if(!utxt.onblur()){ 83 return false; 84 } 85 if(!ptxt.onblur()){ 86 return false; 87 } 88 } 89 90 91 92 </script>
标签：
原文地址：http://www.cnblogs.com/justyq/p/4827694.html
