Form validation
<title> form Verification Class Validator v1.01</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;overfmin:auto} Form{display:inline} </style > <table align= "center" > <form name= "theform" id= "demo" action= "" method= "get" > <tr> <td> ; real name: </td><td><input name= "name" datatype= "Chinese" msg= "real name only allowed Chinese" ></td> </tr> < tr> <td> English Name: </td><td><input name= "Nick" datatype= "Chinese" require= "false" msg= "English name only allowed English letter" ></td> </tr> <tr> <td> home: </td><td><input name= "homepage" require= "false" D Atatype= "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><input Name= "Repeat" datatype= "Repeat" to= "Password" msg= "Two input passwords inconsistent" type= "Password" ></td> </tr> <tr> <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" ></td> </tr> <tr> <td>qq:</td><td><input name= "QQ" require= "false" Datatype= "QQ" msg= "QQ number does not exist" ></td> </tr> <tr> <td> ID card: </td><td><input name = "card" datatype= "Idcard" msg= "wrong ID number" ></td> </tr> <tr> <td> Age:</td><td> <input name= "Year" datatype= "Range" msg= "age must be between 18~28" min= "" max= "></td> </tr> <tr> ;td> age 1:</td><td><input name= "Year1"Require= "false" Datatype= "Compare" msg= age must be above 18 "to=" operator= "greaterthanequal" ></td> </tr> <tr> <td> Tel: </td><td><input name= "Phone" require= "false" datatype= "Phone" msg= "phone number is incorrect" ></td> </tr> <tr> <td> Mobile: </td><td><input name= "mobile" require= "false" dat Atype= "mobile" msg= "phone number incorrect" ></td> </tr> <tr> <td> Birthday: </td><td><input Name = "Birthday" datatype= "date" format= "Ymd" msg= "Birthday date does not exist" ></td> </tr> <tr> <td> Postal code: </td& Gt;<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= " The operating system "><option value=" is not selected > 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> Movement < Input name= "favorite" value= "1" type= "checkbox" > Internet <input name= "favorite" value= "2" type= "checkbox" > Listening 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=" 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=" "msg=" autobiographical content must be within [3,10] bytes "> Chinese is two bytes t</textarea></td> </tr> <tr> TD colspan= "2" ><input name= "Submit" type= "Submit" value= "Confirm submit" ><input value= "test mode 1" type= "button" > <input value= "test mode 2" type= "button" ><input value= "test mode 3" type= "button" ></td> </tr> </form& Gt </table> <script>/************************************************* Validator v1.01 Code by i foshan people wfsr@cunite.com http://www.cunite.com*************************************************/Validator = {Require:/.+/, Email:/^\w+ ([-+.] \w+) *@\w+ ([-.] \w+) *\.\w+ ([-.] \w+) *$/, Phone:/^ ((\d{3}\) | \d{3}\-))? (\ (0\d{2,3}\) |0\d{2,3}-)? [1-9]\d{6,7}$/, Mobile:/^ ((\d{3}\)) | ( \d{3}\-)? 13\d{9}$/, Url:/^http:\/\/[a-za-z0-9]+\. [a-za-z0-9]+[\/=\?%\ -&_~ ' @[\]\ ': +!] * ([^<>\ "\"]) *$/, Idcard:/^\d{15} (\d{2}[A-za-z0-9])? $/, 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]+$/, UnSafe:/^ ([a-z]*|[ a-z]*|\d*| [-_\~!@#\$%\^&\*\.\ (\) \[\]\{\}<>\?\\\/\ ' \ "]*) |. {0,5}) $|\s/, Issafe:function (str) {return!this. Unsafe.test (str);}, Safestring: "this. Issafe (Value) ", 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 && Value < 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: [" The following reasons cause the commit failure: \t\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 ' Date ': Case ' Repeat ': Case ' Range ': Case ' Compare ': Case "Custom": C Ase ' Group ': Case ' Limit ': Case ' LIMITB ': Case ' safestring ': 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; }, 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]--; 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]--; Year = (M[5].length = 4)? M[5]: getFullYear (parseint (m[6), 10)); Break Default:break; if (!parseint (month)) return false; month = month==12 0:month; var date = new Date (year, month, day); return (typeof date = = "Object" && year = = Date.getfullyear () &&Amp month = = Date.getmonth () && Day = = Date.getdate ()); function getFullYear (y) {return (y<30?) "A": "") + y) | }}</script>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]