Verification of forms has always been a headache for web designers, and the form validation class validator is written to address this issue, designed to liberate designers from the complexities of form validation and focus on web design and functional improvements.
Validator is a custom property of a pseudo static class and object based on JavaScript technology, which validates the form entry in a Web page, allows multiple forms to be validated simultaneously on the same page, and, after familiarity with the interface, validates a particular form item or even just a string. Because it is a pseudo static class, you do not need to instantiate it at call time, directly with the class name +. Syntax + property or method name. In addition, validator provides 3 different error hint modes to meet different needs.
Validator currently achievable types of authentication are:
[JavaScript] Version
Validator currently achievable types of authentication are:
1. Whether it is empty;
2. Chinese characters;
3. Double Byte character
4. English;
5. Number;
6. Integers;
7. Real numbers;
8.Email address;
9. Web sites using the HTTP protocol;
10. Telephone number;
11. Currency;
12. mobile phone number;
13. zip Code;
14. Identification number (1.05 enhancement);
15.QQ number;
16. Date;
17. The password which complies with the safety rule;
18. Duplicate value of a certain item;
19. Comparison of the relationship between two numbers;
20. Determine whether the input value is in (n, m) interval;
21. Enter character length limits (can be compared by byte);
22. For the selection of a radio button with the same name to judge;
23. Limit the number of selected multiple-selection buttons with the same name;
24. Custom regular expression validation;
25. File Upload format filter (1.04)
Operating Environment (client):
Tested with IE6.0+SP1 and Mozilla Firefox 1.0 under Windows Server 2003;
The Netscape test was passed under LUnix RedHat 9;
For the client's form validation, this JavaScript-based Validator can basically be satisfied, can download chm file: Validator.chm download
Click to download
<title> form Verification Class Validator v1.05</title> <style> body,td{font:normal 12px verdana;color: #333333} INP Ut,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" OnS Ubmit= "return validator.validate (this,2)" > <tr> <td> ID Number: </td><td><input name= "card" Datatype= "Idcard" msg= "ID number Error" ></td> </tr> <tr> <td> real name:</td><td>< Input name= "name" datatype= "Chinese" msg= "true name only allowed Chinese" ></td> </tr> <tr> <td>id:</td& Gt;<td><input name= "username" datatype= "username" msg= "ID name not compliant" ></td> </tr> <tr> <td> English name:</td><td><Input name= "Nick" datatype= "Chinese" require= "false" msg= "English name only allow English alphabet" ></td> </tr> <tr> &L T;td> Home: </td><td><input name= "homepage" require= "false" datatype= "url" msg= "Illegal url" ></td > </tr> <tr> <td> Password: </td><td><input name= "Password" datatype= "safestring" msg= "Password does not conform to security rules" type= "password" ></td> </tr> <tr> <td> repeat: </td><td><inpu T name= "Repeat" datatype= "Repeat" to= "Password" msg= "Two input passwords inconsistent" type= "Password" ></td> </tr> <TR&G T <td> e-mail: </td><td><input name= "email" datatype= "Email" msg= "mailbox format is not correct" ></td> </tr> <tr> <td> Email: </td><td><input name= "Email" datatype= "Repeat" to= "email" msg= "two-input mailbox inconsistency" &G t;</td> </tr> <tr> <td>qq:</td><td><input name= "QQ" require= "false" Datat Ype= "QQ" msg= "QQ number does not exist" >≪/td> </tr> <tr> <td> ID: </td><td><input name= "card" datatype= "Idcard" M sg= "ID number incorrect" ></td> </tr> <tr> <td> Age: </td><td><input name= "Year" data Type= "Range" msg= "age must be between 18~28" min= "max=" ></td> </tr> <tr> <td> Age 1:</TD&G T;<td><input name= "Year1" require= "false" datatype= "Compare" age must be above 18 "msg=" "to=" Greaterthanequal "></td> </tr> <tr> <td> Tel: </td><td><input name=" Phone "Require=" false "datatype=" Phone "msg=" Telephone number incorrect "></td> </tr> <tr> <td> mobile phone:</td> <td><input name= "mobile" require= "false" datatype= "mobile" msg= "incorrect cell phone number" ></td> </tr> < Tr> <td> Birthdays: </td><td><input name= "Birthday" datatype= "date" format= "Ymd" msg= "Birthday date does not exist" > </td> </tr> <tr> ≪td> zip Code: </td><td><input name= "Zip" datatype= "Custom" regexp= "^[1-9]\d{5}$" msg= "ZIP code does not exist" > </td> </tr> <tr> <td> Postal code: </td><td><input name= "Zip1" datatype= "Zip" msg= "ZIP code does not exist" ></td> </tr> <tr> <td> operating system: </td><td><select name= "Operation" Datatype= "Require" msg= "not selected operating system" ><option value= "" > select the operating system you are using </option><option value= "Win98" >win98</option><option value= "Win2K" >win2k</option><option value= "WinXP" >WinXP</ option></select></td> </tr> <tr> <td> province:</td><td> Guangdong <input name = "Province" value= "1" type= "Radio" > Shaanxi <input name= "province" value= "2" type= "Radio" > Zhejiang <input name= " Province "value=" 3 "type=" Radio "> Jiangxi <input name=" province "value=" 4 "type=" Radio "datatype=" Group "msg=" must select a province "></td> </tr> <tr> <td> Hobby: </td><td> Sports <input name= "favorite" value= "1" type= "checkbox" > Internet access <input name= "favorite" value= "2" type= " CheckBox "> Listen to Music <input name=" Favorite "value=" 3 "type=" checkbox "> Reading <input name=" favorite "value=" 4 "type=" CheckBox "" "Datatype=" Group "min=" 2 "max=" 3 "msg=" must choose 2~3 kind of hobby "></td> </tr> <td> Self Introduction:</td> <td><textarea name= "Description" datatype= "Limit" max= "msg=" the self-introduction content must be within 10 words "> Chinese is a word </textarea ></td> </tr> <td> Autobiography: </td><td><textarea name= "History" datatype= "LIMITB" min= " 3 "max=" the autobiographical content of "msg=" must be within [3,10] byte "> Chinese is two bytes t</textarea></td> </tr> <tr> <td> Photo Upload: </td><td><input name= "Up" datatype= "Filter" msg= "illegal file format" type= "file" accept= "jpg, GIF, PNG" > </td> </tr> <tr> <td colspan= "2" ><input name= "Submit" type= "Submit" value= "Confirm Submission" >& Lt;input onclick= "Validator.validate (Document.geteleMentbyid (' demo ')] "value=" test mode 1 "type=" button "><input onclick=" validator.validate (' Demo '), 2 "value=" test mode 2 "type=" button "><input onclick=" Validator.validate (' demo '), 3 ) "Value=" test mode 3 "type=" button "></td> </tr> </form> </table> <script>/******* Validator v1.05 Code by i foshan people 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+)? $/, 中文版:/^[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 (getattribu Te (' 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]], E Rrormessage: ["The following causes commit failure: \t\t\t\t"], validate:function (theform, mode) {var obj = theform | | event.srcele ment; 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 ' Repe At ': 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.c Reateelement ("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.col or = ""; 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 = [', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ' Beijing ', ' Tianjin ', ' Hebei ', ' Shanxi ', ' Inner Mongolia ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ' , ', ', ', ' Shanghai ', ' Jiangsu ', ' Zhejiang ', ' Ann Micro ', ' Fujian ', ' Jiangxi ', ' Shandong ', ', ', ', ', ' Henan ', ' Hubei ', ' Hunan ', ' Guangdong ', ' Guangxi ', ' Hainan ', ', ', ', ', ' Chongqing ', ' Sichuan ', ' Guizhou ', ' Yunnan ', ' Tibet ', ', ', ', ', ', ', ', ', ', ', ', ', ' Shaanxi ', ' Gansu ', ' Qinghai ', ' Ningxia ', ' Xinjiang ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ' ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ', ' 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 = =) {Ai = number.substr (0, 17); Date = [Re[9], re[10], Re[11]].join ("-"); else{Ai = number.substr (0, 6) + "n" + number.substr (6); date = ["n" + 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 = = && 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?) "A": "") + y) | }} </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
