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>
