js-表单验证 

 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">密&nbsp;码:</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>

 

posted @ 2015-09-21 23:39  -Amy-  阅读(208)  评论(0)    收藏  举报