js 表单验证实例

gspan.html

 1 <html>
 2 
 3 <head>
 4 
 5     <title>表单验证实例</title>
 6 
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 
 9     <script src="check.js" type="text/javascript"></script>
10 
11     <style>
12 
13         span{ font-size:12px; }
14 
15         .stats1{ color : #ccc; }
16 
17         .stats2{ color :black; }
18 
19         .stats3{ color :red; }
20 
21         .stats4{ color :green; }
22 
23  
24 
25     </style>
26 
27 </head>
28 
29 <body>
30 
31     <form method="post" action="reg.php" onsubmit="return regs('click')" >
32 
33         用户名：<input type="text" name="username" /><span class="stats1">用户名不能为空</span><br/>
34 
35         邮箱：<input type="text" name="email" /><span class="stats1">邮箱不能为空</span><br/>
36 
37         密码：<input type="password" name="password" /><span class="stats1">密码不能为空</span><br/>
38 
39         确认密码：<input type="password" name="chkpass" /><span class="stats1">密码不能为空</span><br/>
40 
41         <input type="submit" />
42 
43     </form>
44 
45 </body>
46 
47 </html>

check.js

  1 function gspan(cobj){       //获取表单后的span 标签 显示提示信息
  2 
  3     if (cobj.nextSibling.nodeName != 'SPAN'){
  4 
  5         gspan(cobj.nextSibling);
  6 
  7     } else {
  8 
  9         return cobj.nextSibling;
 10 
 11     }
 12 
 13 }
 14 
 15  
 16 
 17 //检查表单 obj【表单对象】， info【提示信息】 fun【处理函数】  click 【是否需要单击， 提交时候需要触发】
 18 
 19 function check(obj, info, fun, click){
 20 
 21     var sp = gspan(obj);
 22 
 23     obj.onfocus = function(){
 24 
 25         sp.innerHTML = info;
 26 
 27         sp.className = 'stats2';
 28 
 29     }
 30 
 31  
 32 
 33     obj.onblur = function(){
 34 
 35         if (fun(this.value)){
 36 
 37             sp.innerHTML = "输入正确！";
 38 
 39             sp.className = "stats4";
 40 
 41         } else {
 42 
 43             sp.innerHTML = info;
 44 
 45             sp.className = "stats3";
 46 
 47         }
 48 
 49     }
 50 
 51  
 52 
 53     if (click == 'click'){
 54 
 55         obj.onblur();
 56 
 57     }
 58 
 59 }
 60 
 61  
 62 
 63 onload = regs;      //页面载入完执行
 64 
 65  
 66 
 67 function regs(click){
 68 
 69     var stat = true;        //返回状态， 提交数据时用到
 70 
 71     username = document.getElementsByName('username')[0];
 72 
 73     password = document.getElementsByName('password')[0];
 74 
 75     chkpass = document.getElementsByName('chkpass')[0];
 76 
 77     email = document.getElementsByName('email')[0];
 78 
 79      
 80 
 81     check(username, "用户名的长度在3-20之间", function(val){
 82 
 83         if (val.match(/^\S+$/) && val.length >=3 && val.length <=20){
 84 
 85             return true;
 86 
 87         } else {
 88 
 89             stat = false;
 90 
 91             return false;
 92 
 93         }
 94 
 95     }, click);
 96 
 97  
 98 
 99     check(password, "密码必须在6-20位之间", function(val){
100 
101         if (val.match(/^\S+$/) && val.length >= 6 && val.length <=20){
102 
103             return true;
104 
105         } else {
106 
107             stat = false;
108 
109             return false;
110 
111         }
112 
113     }, click);
114 
115  
116 
117      
118 
119     check(chkpass, "确定密码要和上面一致，规则也要相同", function(val){
120 
121         if (val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val == password.value){
122 
123             return true;
124 
125         } else {
126 
127             stat = false;
128 
129             return false;
130 
131         }
132 
133     }, click);
134 
135  
136 
137     check(email, "请按邮箱规则输入", function(val){
138 
139         if (val.match(/\w+@\w+\.\w/)){
140 
141             return true;
142 
143         } else {
144 
145             stat = false;
146 
147             return false;
148 
149         }
150 
151     }, click);
152 
153     return stat;
154 
155 }