A very powerful and complete web form validator Validator v1.05_form effects

Form validation has always been a headache for web designers. The form validation class Validator was written to solve this problem. It aims to free designers from complicated form validation and focus on the design and functionality of web pages. on improvements.

Validator is a pseudo-static class and custom attribute of an object based on JavaScript technology. It can perform corresponding verification on the input of form items in the web page, allowing multiple forms to be verified simultaneously on the same page. You can also do this after you are familiar with the interface. Validate a specific form item or even just a string. Because it is a pseudo-static class, it does not need to be instantiated when calling. It can be called directly with "class name. Syntax attribute or method name". In addition, Validator also provides 3 different error prompt modes to meet different needs.

Validator’s current validation types are:
[JavaScript] version
Validator’s current validation types are:
1. Whether it is empty;
2. Chinese characters ;
3.Double-byte character
4.English;
5.Number;
6.Integer;
7.Real number;
8.Email address;
9 .Website using HTTP protocol;
10. Phone number;
11. Currency;
12. Mobile phone number;
13. Postal code;
14. ID card number (1.05 enhancement) ;
15. QQ number;
16. Date;
17. Password that complies with security rules;
18. Repeated value of a certain item;
19. Comparison of the relationship between two numbers;
20. Determine whether the input value is in the (n, m) range;
21. Input character length limit (can be compared by bytes);
22. Determine the selection of radio buttons with the same name;
23. Limit the number of selected multi-select buttons with the same name;
24. Customized regular expression verification;
25. File upload format filtering (1.04)
Runtime environment (client ):
Passed the test with IE6.0 SP1 and Mozilla Firefox 1.0 under Windows Server 2003;
Passed the Netscape test under Lux RedHat 9;

For client-side form validation, this is based on JavaScript The Validator written can basically satisfy all requirements. Specifically, you can download the CHM file: Validator.CHM download

Click to download

<title>Form validation class Validator v1.05</title> <style> body,td{font:normal 12px Verdana;color:#333333} input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} table{border-collapse:collapse;} td{padding:3px} input{height:20;} textarea{width:80%;height:50px;overflow:auto;} form{display:inline} </style> <table align="center"> <form name="theForm" id="demo" method="get" onsubmit="return Validator.Validate(this,2)"> <tr> <td>ID number: </td> <td><input name="Card" datatype="IdCard" msg="身份证号错误"></td> </tr> <tr> <td>Real name: </td> <td><input name="Name" datatype="Chinese" msg="真实姓名只允许中文"></td> </tr> <tr> <td>ID: </td> <td><input name="username" datatype="Username" msg="ID名不符合规定"></td> </tr> <tr> <td>English name: </td> <td><input name="Nick" datatype="English" require="false" msg="英文名只允许英文字母"></td> </tr> <tr> <td>Homepage: </td> <td><input name="Homepage" require="false" datatype="Url" msg="非法的Url"></td> </tr> <tr> <td>Password: </td> <td><input name="Password" datatype="SafeString" msg="密码不符合安全规则" type="password"></td> </tr> <tr> <td>Repeat: </td> <td><input name="Repeat" datatype="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> </tr> <tr> <td>Mailbox: </td> <td><input name="Email" datatype="Email" msg="信箱格式不正确"></td> </tr> <tr> <td>Mailbox: </td> <td><input name="Email" datatype="Repeat" to="Email" msg="两次输入的信箱不一致"></td> </tr> <tr> <td>QQ: </td> <td><input name="QQ" require="false" datatype="QQ" msg="QQ号码不存在"></td> </tr> <tr> <td>ID card: </td> <td><input name="Card" datatype="IdCard" msg="身份证号码不正确"></td> </tr> <tr> <td>Age: </td> <td><input name="Year" datatype="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> </tr> <tr> <td>Age 1: </td> <td><input name="Year1" require="false" datatype="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> </tr> <tr> <td>Tel: </td> <td><input name="Phone" require="false" datatype="Phone" msg="电话号码不正确"></td> </tr> <tr> <td>Mobile phone: </td> <td><input name="Mobile" require="false" datatype="Mobile" msg="手机号码不正确"></td> </tr> <tr> <td>Birthday: </td> <td><input name="Birthday" datatype="Date" format="ymd" msg="生日日期不存在"></td> </tr> <tr> <td>Postcode:</td> <td><input name="Zip" datatype="Custom" regexp="^[1-9]d{5}$" msg="邮政编码不存在"></td> </tr> <tr> <td>邮政编码：</td> <td><input name="Zip1" datatype="Zip" msg="邮政编码不存在"></td> </tr> <tr> <td>操作系统：</td> <td><select name="Operation" datatype="Require" msg="未选择所用操作系统"><option value="">选择您所用的操作系统</option> <option value="Win98">Win98</option> <option value="Win2k">Win2k</option> <option value="WinXP">WinXP</option></select></td> </tr> <tr> <td>所在省份：</td> <td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" datatype="Group" msg="必须选定一个省份"> </td> </tr> <tr> <td>爱好：</td> <td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox" datatype="Group" min="2" max="3" msg="必须选择2~3种爱好"> </td> </tr> <td>自我介绍：</td> <td><textarea name="Description" datatype="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字 自传： 中文是两个字节t 相片上传： <script> /************************************************* Validator v1.05 code by 我佛山人 wfsr@msn.com *************************************************/ Validator = { Require : /.+/, Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/, Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, IdCard : "this.IsIdCard(value)", Currency : /^\d+(\.\d+)?$/, Number : /^\d+$/, Zip : /^[1-9]\d{5}$/, QQ : /^[1-9]\d{4,8}$/, Integer : /^[-\+]?\d+$/, Double : /^[-\+]?\d+(\.\d+)?$/, English : /^[A-Za-z]+$/, Chinese : /^[\u0391-\uFFE5]+$/, Username : /^[a-z]\w{3,}$/i, UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, IsSafe : function(str){return !this.UnSafe.test(str);}, SafeString : "this.IsSafe(value)", Filter : "this.DoFilter(value, getAttribute('accept'))", Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')", Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", Custom : "this.Exec(value, getAttribute('regexp'))", Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", ErrorItem : [document.forms[0]], ErrorMessage : ["以下原因导致提交失败： \t\t\t"], Validate : function(theForm, mode){ var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for(var i=0;i<count;i++){ with(obj.elements[i]){ var _dataType = getAttribute("dataType"); if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; this.ClearState(obj.elements[i]); if(getAttribute("require") == "false" && value == "") continue; switch(_dataType){ case "IdCard" : case "Date" : case "Repeat" : case "Range" : case "Compare" : case "Custom" : case "Group" : case "Limit" : case "LimitB" : case "SafeString" : case "Filter" : if(!eval(this[_dataType])) { this.AddError(i, getAttribute("msg")); } break; default : if(!this[_dataType].test(value)){ this.AddError(i, getAttribute("msg")); } break; } } } if(this.ErrorMessage.length > 1){ mode = mode || 1; var errCount = this.ErrorItem.length; switch(mode){ case 2 : for(var i=1;i<errCount;i++) this.ErrorItem[i].style.color = "red"; case 1 : alert(this.ErrorMessage.join("\n")); this.ErrorItem[1].focus(); break; case 3 : for(var i=1;i<errCount;i++){ try{ var span = document.createElement("SPAN"); span.id = "__ErrorMessagePanel"; span.style.color = "red"; this.ErrorItem[i].parentNode.appendChild(span); span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); } catch(e){alert(e.description);} } this.ErrorItem[1].focus(); break; default : alert(this.ErrorMessage.join("\n")); break; } return false; } return true; }, limit : function(len,min, max){ min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str){ return str.replace(/[^\x00-\xff]/g,"**").length; }, ClearState : function(elem){ with(elem){ if(style.color == "red") style.color = ""; var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; if(lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError : function(index, str){ this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec : function(op, reg){ return new RegExp(reg,"g").test(op); }, compare : function(op1,operator,op2){ switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked : function(name, min, max){ var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for(var i=groups.length-1;i>=0;i--) if(groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, DoFilter : function(input, filter){ return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input); }, IsIdCard : function(number){ var date, Ai; var verify = "10x98765432"; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外']; var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); if(re == null) return false; if(re[1] >= area.length || area[re[1]] == "") return false; if(re[2].length == 12){ Ai = number.substr(0, 17); date = [re[9], re[10], re[11]].join("-"); } else{ Ai = number.substr(0, 6) + "19" + number.substr(6); date = ["19" + re[4], re[5], re[6]].join("-"); } if(!this.IsDate(date, "ymd")) return false; var sum = 0; for(var i = 0;i<=16;i++){ sum += Ai.charAt(i) * Wi[i]; } Ai += verify.charAt(sum%11); return (number.length ==15 || number.length == 18 && number == Ai); }, IsDate : function(op, formatString){ formatString = formatString || "ymd"; var m, year, month, day; switch(formatString){ case "ymd" : m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); if(m == null ) return false; day = m[6]; month = m[5]*1; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy" : m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); if(m == null ) return false; day = m[1]; month = m[3]*1; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } if(!parseInt(month)) return false; month = month==0 ?12:month; var date = new Date(year, month-1, day); return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate()); function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} } } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]