| Form Verification has always been a headache for web designers. Form Verification validator is written to solve this problem and aims to free designers from complicated form verification, focus on Webpage Design and functional improvement. Validator is a pseudo-static Class Based on JavaScript technology and custom attribute of objects. It can verify the input of form items on the webpage and allow multiple forms to be verified simultaneously on the same page, after you are familiar with the interface, you can verify a specific form item or even a string. Because it is a pseudo-static class, you do not need to instantiate it during calling. It is called directly by "class name +. Syntax + attribute or method name. In addition, validator provides three different error message modes to meet different needs. Validator currently supports the following verification types: 1. Whether it is null;
2. Chinese characters;
3. double-byte characters
4. English;
5. Number;
6. Integer;
7. Real number;
8. Email address;
9. Use the http url;
10. Phone number;
11. currency;
12. Mobile phone number;
13. Zip code;
14. ID card number;
15. QQ number;
16. date;
17. password that complies with security rules;
18. duplicate value of an item;
19. Comparison of the two numbers;
20. Determine whether the input value is in the (n, m) interval;
21. length limit of input characters (can be compared by byte );
22. selection and determination of Single-choice buttons with the same name;
23. restrict the number of multiple buttons with the same name;
24. User-Defined Regular Expression verification; Running Environment (client ): Ie6.0 + SP1 and Mozilla Firefox 2003 passed the test on Windows Server 1.0;
Netscape test passed in Lunix RedHat 9; For form verification on the client side, this JavaScript-based validator can basically be used. You can download the CHM file:
Download validator. CHM <Title> Form Verification class validator V1.0 </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" Ction = "" method = "get" onsubmit = "Return validator. validate (this, 2) "> <tr> <TD> real name: </TD> <input name = "name" datatype = "Chinese" MSG = "Chinese only"> </TD> </tr> <tr> <TD> English Name: </TD> <input name = "Nick" datatype = "English" require = "false" MSG = "English name only English letters"> </TD> </ tr> <TD> Home Page: </TD> <input name = "Homepage" require = "false" datatype = "url" MSG = "invalid URL"> </TD> </tr> <tr> <TD> password: </TD> <input name = "Pass Word "datatype =" safestring "MSG =" the password does not comply with the security rules "type =" password "> </TD> </tr> <TD> repeated: </TD> <input name = "repeat" datatype = "repeat" to = "password" MSG = "inconsistent passwords" type = "password"> </TD> </tr> <TD> mailbox: </TD> <input name = "email" datatype = "email" MSG = "Incorrect mailbox format"> </TD> </tr> <TD> mailbox: </TD> <input name = "email" datatype = "repeat" to = "email" MSG = "two input mailboxes are inconsistent"> </TD> </tr> <TD> QQ: </TD> <inpu T name = "QQ" require = "false" datatype = "QQ" MSG = "QQ number does not exist"> </TD> </tr> <TD> ID card: </TD> <input name = "card" datatype = "idcard" MSG = "Incorrect ID card number"> </TD> </tr> <TD> age: </TD> <input name = "year" datatype = "range" MSG = "age must be between 18 and ~ Between 28 "min =" 18 "max =" 28 "> </TD> </tr> <TD> age 1: </TD> <input name = "year1" require = "false" datatype = "Compare" MSG = "must be above 18" to = "18" operator = ""greaterthanequal"> </TD> </tr> <TD> Tel: </TD> <input name = "phone" require = "false" datatype = "phone" MSG = "Incorrect phone number"> </TD> </tr> <tr> <TD> mobile phone: </TD> <input name = "mobile" require = "false" datatype = "mobile" MSG = "Incorrect mobile phone number"> </TD> </tr> <tr> <TD> birthday: </TD> <Input name = "brithday" datatype = "date" format = "ymd" MSG = "birthday date does not exist"> </TD> </tr> <TD> zip code: </TD> <input name = "Zip" datatype = "Custom" Regexp = "^ [1-9] \ D {5} $" MSG = "zip code "> </TD> </tr> <TD> zip code: </TD> <input name = "zip1" datatype = "Zip" MSG = "zip code does not exist"> </TD> </tr> <TD> operating system: </TD> <select name = "operation" datatype = "require" MSG = "operating system not selected"> <option value = ""> select operating System </option> <option valu E = "Win98"> Win98 </option> <option value = "Win2k"> Win2k </option> <option value = "WINXP"> WINXP </option> </select> </TD> </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 =" A province must be selected "> </TD> </tr> <TD> Hobbies: </TD> <TD> exercise <input name = "favorite" value = "1" type = "checkbox"> surfing the Internet <input name = "favorite" value = "2" type = "checkbox"> listen to music <input name = "favorite" value = "3" type = "checkbox"> Read Books <input name = "favorite" value = "4" type = "checkbox" "datatype = "Group" min = "2" max = "3" MSG = "must be 2 ~ Three Hobbies: </TD> </tr> <TD> self-introduction: </TD> <textarea name = "Description" datatype = "Limit" max = "10" MSG = "self-introduction content must be within 10 words"> Chinese is one word </textarea> </TD> </tr> <TD> autobiography: </TD> <textarea name = "History" datatype = "limitb" min = "3" max = "10" MSG = "autobiography content must be in [3, 10] </textarea> </TD> </tr> <TD colspan = "2"> <input name = "Submit" Type = "Submit" value = "Confirm submission"> <input onclick = "validator. validate (document. getelementb Yid ('Demo') "value =" Test Mode 1 "type =" button "> <input onclick =" validator. validate (document. getelementbyid ('Demo'), 2) "value =" Test Mode 2 "type =" button "> <input onclick =" validator. validate (document. getelementbyid ('Demo'), 3) "value =" Test Mode 3 "type =" button "> </TD> </tr> </form> </table> <SCRIPT> /****** **************************************** * validator V1.0 Cody by my Buddha Mountain 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 + )? $/, English:/^ [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: ["failed to submit due to the following reasons: \ t"], validate: function (theform, Mode) {var OBJ = theform | event. sr Celement; 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": Case "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 = Doc Ument. 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 (IND Ex, 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 (GR Oups [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 ("^ \ s * (\ D {4}) | (\ D {2 }))([-. /]) (\ D {1, 2}) \ 4 (\ D {1, 2}) \ s * $ "); 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 ("^ \ s * (\ D {1, 2 })([-. /]) (\ D {1, 2}) \ 2 (\ D {4}) | (\ D {2 })) \ s * $ "); 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;} var date = new date (year, month, day ); return (typeof (date) = "object" & year = date. getfullyear () & month = date. getmonth () & day = date. getdate (); function getfullyear (y) {return (Y <30? "20": "19") + Y) | 0 ;}}</SCRIPT> |
