一个非常强大完整的web表单验证程序(2)

Validator 完整代码:

1<title>表单验证类 Validator v1.0</title>
 1<style>   
 2  
 3body,td{font:normal 12px Verdana;color:#333333}   
 4  
 5input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid   
 6#999999;background:#ffffff}   
 7  
 8table{border-collapse:collapse;}   
 9  
10td{padding:3px}   
11  
12input{height:20;}   
13  
14textarea{width:80%;height:50px;overflow:auto;}   
15  
16form{display:inline}   
17  
18</style>
 1<table align="center">
 2<form action="" id="demo" method="get" name="theForm" onsubmit="return Validator.Validate(this,2)">
 3<tr>
 4<td>真实姓名:</td><td><input datatype="Chinese" msg="真实姓名只允许中文" name="Name"/></td>
 5</tr>
 6<tr>
 7<td>英文名:</td><td><input datatype="English" msg="英文名只允许英文字母" name="Nick" require="false"/></td>
 8</tr>
 9<tr>
10<td>主页:</td><td><input datatype="Url" msg="非法的Url" name="Homepage" require="false"/></td>
11</tr>
12<tr>
13<td>密码:</td><td><input datatype="SafeString" msg="密码不符合安全规则" name="Password" type="password"/></td>
14</tr>
15<tr>
16<td>重复:</td><td><input datatype="Repeat" msg="两次输入的密码不一致" name="Repeat" to="Password" type="password"/></td>
17</tr>
18<tr>
19<td>信箱:</td><td><input datatype="Email" msg="信箱格式不正确" name="Email"/></td>
20</tr>
21<tr>
22<td>信箱:</td><td><input datatype="Repeat" msg="两次输入的信箱不一致" name="Email" to="Email"/></td>
23</tr>
24<tr>
25<td>QQ:</td><td><input datatype="QQ" msg="QQ号码不存在" name="QQ" require="false"/></td>
26</tr>
27<tr>
28<td>身份证:</td><td><input datatype="IdCard" msg="身份证号码不正确" name="Card"/></td>
29</tr>
30<tr>
31<td>年龄:</td><td><input datatype="Range" max="28" min="18" msg="年龄必须在18~28之间" name="Year"/></td>
32</tr>
33<tr>
34<td>年龄1:</td><td><input datatype="Compare" msg="年龄必须在18以上" name="Year1" operator="GreaterThanEqual" require="false" to="18"/></td>
35</tr>
36<tr>
37<td>电话:</td><td><input datatype="Phone" msg="电话号码不正确" name="Phone" require="false"/></td>
38</tr>
39<tr>
40<td>手机:</td><td><input datatype="Mobile" msg="手机号码不正确" name="Mobile" require="false"/></td>
41</tr>
42<tr>
43<td>生日:</td><td><input datatype="Date" format="ymd" msg="生日日期不存在" name="Birthday"/></td>
44</tr>
45<tr>
46<td>邮政编码:</td><td><input datatype="Custom" msg="邮政编码不存在" name="Zip" regexp="^[1-9]\d{5}$"/></td>
47</tr>
48<tr>
49<td>邮政编码:</td><td><input datatype="Zip" msg="邮政编码不存在" name="Zip1"/></td>
50</tr>
51<tr>
52<td>操作系统:</td><td><select datatype="Require" msg="未选择所用操作系统" name="Operation"><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
53</tr>
54<tr>
55<td>所在省份:</td><td>广东<input name="Province" type="radio" value="1"/>陕西<input name="Province" type="radio" value="2"/>浙江<input name="Province" type="radio" value="3"/>江西<input datatype="Group" msg="必须选定一个省份" name="Province" type="radio" value="4"/></td>
56</tr>
57<tr>
58<td>爱好:</td><td>运动<input name="Favorite" type="checkbox" value="1"/>上网<input name="Favorite" type="checkbox" value="2"/>听音乐<input name="Favorite" type="checkbox" value="3"/>看书<input "="" datatype="Group" max="3" min="2" msg="必须选择2~3种爱好" name="Favorite" type="checkbox" value="4"/></td>
59</tr>
60<td>自我介绍:</td><td><textarea datatype="Limit" max="10" msg="自我介绍内容必须在10个字之内" name="Description">中文是一个字</textarea></td>
61
62<td>自传:</td><td><textarea datatype="LimitB" max="10" min="3" msg="自传内容必须在[3,10]个字节之内" name="History">中文是两个字节t</textarea></td>
63
64<tr>
65<td colspan="2"><input name="Submit" type="submit" value="确定提交"/><input onclick="Validator.Validate(document.getElementById('demo'))" type="button" value="检验模式1"/><input onclick="Validator.Validate(document.getElementById('demo'),2)" type="button" value="检验模式2"/><input onclick="Validator.Validate(document.getElementById('demo'),3)" type="button" value="检验模式3"/></td>
66</tr>
67</form>
68</table>
  1<script>   
  2  
  3/*************************************************   
  4  
  5Validator v1.0   
  6  
  7cody by 我佛山人   
  8  
  9[email protected]   
 10  
 11http://www.cunite.com   
 12  
 13*************************************************/   
 14  
 15Validator = {   
 16  
 17Require : /.+/,   
 18  
 19Email : /^\w+([-+.]\w+)*@\w+([-.]\\\w+)*\\.\w+([-.]\w+)*$/,   
 20  
 21Phone : /^((\\(\d{3}\\))|(\d{3}\\-))?(\\(0\d{2,3}\\)|0\d{2,3}-)?[1-9]\d{6,7}$/,   
 22  
 23Mobile : /^((\\(\d{3}\\))|(\d{3}\\-))?13\d{9}$/,   
 24  
 25Url : /^http:\/\/[A-Za-z0-9]+\\.[A-Za-z0-9]+[\/=\?%\\-&_~`@[\\]\':+!]*([^<>\"\"])*$/,   
 26  
 27IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,   
 28  
 29Currency : /^\d+(\\.\d+)?$/,   
 30  
 31Number : /^\d+$/,   
 32  
 33Zip : /^[1-9]\d{5}$/,   
 34  
 35QQ : /^[1-9]\d{4,8}$/,   
 36  
 37Integer : /^[-\\+]?\d+$/,   
 38  
 39Double : /^[-\\+]?\d+(\\.\d+)?$/,   
 40  
 41English : /^[A-Za-z]+$/,   
 42  
 43Chinese : /^[\u0391-\uFFE5]+$/,   
 44  
 45UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\\*\\.\\(\\)\\[\\]\\{\\}<>\?\\\\\/\'\"]*)|.{0,5})$|\s/,   
 46  
 47IsSafe : function(str){return !this.UnSafe.test(str);},   
 48  
 49SafeString : "this.IsSafe(value)",   
 50  
 51Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",   
 52  
 53LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",   
 54  
 55Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",   
 56  
 57Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",   
 58  
 59Range : "getAttribute('min') < value && value < getAttribute('max')",   
 60  
 61Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",   
 62  
 63Custom : "this.Exec(value, getAttribute('regexp'))",   
 64  
 65Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",   
 66  
 67ErrorItem : [document.forms[0]],   
 68  
 69ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"],   
 70  
 71Validate : function(theForm, mode){   
 72  
 73var obj = theForm || event.srcElement;   
 74  
 75var count = obj.elements.length;   
 76  
 77this.ErrorMessage.length = 1;   
 78  
 79this.ErrorItem.length = 1;   
 80  
 81this.ErrorItem[0] = obj;   
 82  
 83for(var i=0;i<count;i++){   
 84  
 85with(obj.elements[i]){   
 86  
 87var _dataType = getAttribute("dataType");   
 88  
 89if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")   
 90continue;   
 91  
 92this.ClearState(obj.elements[i]);   
 93  
 94if(getAttribute("require") == "false" && value ==   
 95"") continue;   
 96  
 97switch(_dataType){   
 98  
 99case "Date" :   
100  
101case "Repeat" :   
102  
103case "Range" :   
104  
105case "Compare" :   
106  
107case "Custom" :   
108  
109case "Group" :   
110  
111case "Limit" :   
112  
113case "LimitB" :   
114  
115case "SafeString" :   
116  
117if(!eval(this[_dataType])) {   
118  
119this.AddError(i, getAttribute("msg"));   
120  
121}   
122  
123break;   
124  
125default :   
126  
127if(!this[_dataType].test(value)){   
128  
129this.AddError(i, getAttribute("msg"));   
130  
131}   
132  
133break;   
134  
135}   
136  
137}   
138  
139}   
140  
141if(this.ErrorMessage.length > 1){   
142  
143mode = mode || 1;   
144  
145var errCount = this.ErrorItem.length;   
146  
147switch(mode){   
148  
149case 2 :   
150  
151for(var i=1;i<errCount;i++)   
152  
153this.ErrorItem[i].style.color = "red";   
154  
155case 1 :   
156  
157alert(this.ErrorMessage.join("\n"));   
158  
159this.ErrorItem[1].focus();   
160  
161break;   
162  
163case 3 :   
164  
165for(var i=1;i<errCount;i++){   
166  
167try{   
168  
169var span = document.createElement("SPAN");   
170  
171span.id = "__ErrorMessagePanel";   
172  
173span.style.color = "red";   
174  
175this.ErrorItem[i].parentNode.appendChild(span);   
176  
177span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");   
178  
179}   
180  
181catch(e){alert(e.description);}   
182  
183}   
184  
185this.ErrorItem[1].focus();   
186  
187break;   
188  
189default :   
190  
191alert(this.ErrorMessage.join("\n"));   
192  
193break;   
194  
195}   
196  
197return false;   
198  
199}   
200  
201return true;   
202  
203},   
204  
205limit : function(len,min, max){   
206  
207min = min || 0;   
208  
209max = max || Number.MAX_VALUE;   
210  
211return min <= len && len <= max;   
212  
213},   
214  
215LenB : function(str){   
216  
217return str.replace(/[^\x00-\xff]/g,"**").length;   
218  
219},   
220  
221ClearState : function(elem){   
222  
223with(elem){   
224  
225if(style.color == "red")   
226  
227style.color = "";   
228  
229var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];   
230  
231if(lastNode.id == "__ErrorMessagePanel")   
232  
233parentNode.removeChild(lastNode);   
234  
235}   
236  
237},   
238  
239AddError : function(index, str){   
240  
241this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];   
242  
243this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":"   
244\+ str;   
245  
246},   
247  
248Exec : function(op, reg){   
249  
250return new RegExp(reg,"g").test(op);   
251  
252},   
253  
254compare : function(op1,operator,op2){   
255  
256switch (operator) {   
257  
258case "NotEqual":   
259  
260return (op1 != op2);   
261  
262case "GreaterThan":   
263  
264return (op1 > op2);   
265  
266case "GreaterThanEqual":   
267  
268return (op1 >= op2);   
269  
270case "LessThan":   
271  
272return (op1 < op2);   
273  
274case "LessThanEqual":   
275  
276return (op1 <= op2);   
277  
278default:   
279  
280return (op1 == op2);   
281  
282}   
283  
284},   
285  
286MustChecked : function(name, min, max){   
287  
288var groups = document.getElementsByName(name);   
289  
290var hasChecked = 0;   
291  
292min = min || 1;   
293  
294max = max || groups.length;   
295  
296for(var i=groups.length-1;i>=0;i--)   
297  
298if(groups[i].checked) hasChecked++;   
299  
300return min <= hasChecked && hasChecked <= max;   
301  
302},   
303  
304IsDate : function(op, formatString){   
305  
306formatString = formatString || "ymd";   
307  
308var m, year, month, day;   
309  
310switch(formatString){   
311  
312case "ymd" :   
313  
314m = op.match(new RegExp("^\\\s*((\\\d{4})|(\\\d{2}))([-./])(\\\d{1,2})\\\4(\\\d{1,2})\\\s*$"));   
315  
316if(m == null ) return false;   
317  
318day = m[6];   
319  
320month = m[5]--;   
321  
322year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));   
323  
324break;   
325  
326case "dmy" :   
327  
328m = op.match(new RegExp("^\\\s*(\\\d{1,2})([-./])(\\\d{1,2})\\\2((\\\d{4})|(\\\d{2}))\\\s*$"));   
329  
330if(m == null ) return false;   
331  
332day = m[1];   
333  
334month = m[3]--;   
335  
336year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));   
337  
338break;   
339  
340default :   
341  
342break;   
343  
344}   
345  
346var date = new Date(year, month, day);   
347  
348return (typeof(date) == "object" && year == date.getFullYear()   
349&& month == date.getMonth() && day == date.getDate());   
350  
351function GetFullYear(y){return ((y<30 ? "20" : "19") +   
352y)|0;}   
353  
354}   
355  
356}   
357  
358</script>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus