JS Tomatoes Form Validation class _ form Effects

It's not too much of a hassle to see the code and add some validation to other formats.
It is possible to modify the feedback method for various hint effects because you do not want the code to become too bloated, so there are many infrequently used features that are not added
The main purpose is to provide reference and sharing, but also hope to be able to make it more perfect according to the opinions of everyone

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Tomato Form Validation Class _ cloud-Habitat community </title> <script language=" javascript "type=" text/ JavaScript >//Remove spaces on either side of the string String.prototype.trim = function () {return this.replace (^\s+) | ( \s+$)/g, ""); //Detect if the string is empty String.prototype.isEmpty = function () {return! ( /.? [^\s]+/.test (this)); //Detection value is between two specified values String.prototype.isBetween = function (val, min, max) {return isNaN (val) = = False && Val >= min && val <= max; //Get maximum or minimum String.prototype.getBetweenVal = function (what) {var val = this.split (', '); var min = val[0]; var max = val[1] = = null? VAL[0]: val[1]; if (parseint (min) > parseint (max)) {min = max; max = val[0];return what = = ' min '? (isNaN (min) null:min): (isNaN (max)? Null:max); var validator = function (formobj) {this.alltags = Formobj.getelementsbytagname (' * '); String validation Regular Expression This.reg = new Object (); This.reg.english =/^[a-za-z0-9_\-]+$/; This.reg.chinese =/^[\u0391-\uffe5]+$/; This.reg.number =/^[-\+]?\d+ (\.\d+)? $/; This.reg.integer =/^[-\+]?\d+$/; This.reg.float =/^[-\+]?\d+ (\.\d+)? $/; This.reg.date =/^ (\d{4}) (-|\/) (\d{1,2}) \2 (\d{1,2}) $/; This.reg.email =/^\w+ ([-+.] \w+) *@\w+ ([-.] \w+) *\.\w+ ([-.] \w+) *$/; This.reg.url =/^ ((HT|F) TP (s)) \:\/\/) [A-za-z0-9]+\. [a-za-z0-9]+[\/=\?%\ -&_~ ' @[\]\ ': +!] * ([^<>\ "\"]) *$/; This.reg.phone =/^ ((\d{2,3}\)) | ( \d{3}\-))? (\ (0\d{2,3}\) |0\d{2,3}-)? [1-9]\d{6,7} (\-\d{1,4})? $/; This.reg.mobile =/^ ((\d{2,3}\)) | ( \d{3}\-))? ((13\d{9}) | (159\d{8})) $/; This.reg.ip =/^ (0|[ 1-9]\d?| [0-1]\d{2}|2[0-4]\d|25[0-5]). (0| [1-9]\d?| [0-1]\d{2}|2[0-4]\d|25[0-5]). (0| [1-9]\d?| [0-1]\D{2}|2[0-4]\D|25[0-5]). (0| [1-9]\d?| [0-1]\d{2}|2[0-4]\d|25[0-5]) $/; This.reg.zipcode =/^[1-9]\d{5}$/; THIS.REG.QQ =/^[1-9]\d{4,10}$/; This.reg.msn =/^\w+ ([-+.] \w+) *@\w+ ([-.] \w+) *\.\w+ ([-.] \w+) *$/; This.reg.idcard =/(^\d{15}$) | (^\d{17}[0-9xx]$)/; Error output Information This.tip = new Object (); This.tip.unknow = ' authentication type not found, cannot perform validation. '; This.tip.paramError = ' parameter set error, cannot perform validation. '; this.tip.required = ' is not allowed to be empty. '; This.tip.english = ' allows only English characters and underscores (a-za-z0-9_). '; This.tip.chinese = ' Only Chinese characters are allowed. '; This.tip.number = ' is not a valid number. '; This.tip.integer = ' is not a valid integer. '; This.tip.float = ' is not a valid floating-point number. '; This.tip.date = ' is not a valid date format. (For example: 2007-06-29) '; This.tip.email = ' is not a valid e-mail format. '; This.tip.url = ' is not a valid hyperlink format. '; This.tip.phone = ' is not a valid phone number. '; This.tip.mobile = ' is not a valid cell phone number. '; This.tip.ip = ' is not a valid IP address. '; This.tip.zipcode = ' is not a valid ZIP code. '; THIS.TIP.QQ = ' is not a valid QQ number. '; This.tip.msn = ' is not a valid MSN account. '; ThIs.tip.idcard = ' is not a valid ID number. '; Get control Name This.getcontrolname = function () {return This.element.getAttribute (' controlname ') = null ? ' Specify the value of the control ': This.element.getAttribute (' controlname '); //Set Focus This.setfocus = function (ele) {try {ele.focus (); catch (e) {}}//set border color This.setbordercolor = function (ele) {var bordercolor = Ele.currentstyle ? Ele.currentStyle.borderColor:document.defaultView.getComputedStyle (ele, null) [' bordercolor ']; Ele.style.borderColor = ' #ff9900 '; Ele.onkeyup = function () {this.style.borderColor = bordercolor; Output error Feedback This.feedback = function (type) {try {var msg = eval (' This.tip. ' + t ype) = = undefined? Type:this.getControlName () + eval (' This.tiP. ' + type); catch (e) {msg = type; } this.setbordercolor (This.element); Alert (msg); This.setfocus (this.element); }; Perform string Validation this.validate = function () {var v = this.element.value; Verify that non-empty var required = This.element.getAttribute (' Required ') is allowed; if (required!= null && v.isempty ()) {this.feedback (' required '); return false; //Verify that the legal format is var dataType = This.element.getAttribute (' DataType '); if (!v.isempty () && dataType!= null && datatype.tolowercase ()!= ' password ') {DataType = d Atatype.tolowercase (); try {if (!) ( Eval (' This.reg. ' + dataType)). Test (v)) {this.feedback (dataType); return false; The catch (e) {this.feedback (' unknow '); return FAlse; }///Perform data validation var confirm = This.element.getAttribute (' Confirm '); if (confirm!= null) {try {var data = eval (' formobj. ' + Confirm + '. Value '); if (v!= data) {alert (' two input is inconsistent, please re-enter it.) '); This.setbordercolor (this.element); This.setfocus (this.element); return false; The catch (e) {this.feedback (' paramerror '); return false; }//Verify number size var Databetween = This.element.getAttribute (' Databetween '); if (!v.isempty () && databetween!= null) {var min = databetween.getbetweenval (' min '); var max = databetween.getbetweenval (' Max '); if (min = null | | max = NULL) {this.feedback (' paramerror '); return false;} if (!v.isbetween (V.trim (), Min, max)) {This.feedback (This.getcontrolname () + ' must be between ' + M Number in + '-' + Max + '. '); return false; }//Verify character length var datalength = This.element.getAttribute (' datalength '); if (!v.isempty () && datalength!= null) {var min = datalength.getbetweenval (' min '); var max = datalength.getbetweenval (' Max '); if (min = null | | max = NULL) {this.feedback (' paramerror '); return false; } if (!v.isbetween (V.trim (). Length, Min, max)) {This.feedback (This.getcontrolname () + ' must be ' + min + '-' + Max + ' characters. '); return false; } return true; }; Perform an initialization operation This.init = function () {for (var i=0; i<this.alltags.length; i++) {if (This.all Tags[i].tagname.touppercase () == ' INPUT ' | | This.alltags[i].tagname.touppercase () = = ' SELECT ' | | This.alltags[i].tagname.touppercase () = = ' TEXTAREA ') {this.element = alltags[i]; if (!this.validate ()) return false; } } }; return This.init (); } </script> </pead> <body> <form id= "Form1" Name= "Form1" method= "Post" action= "" onsubmit= "return Validator (this); " > <table width= "border=" 0 "cellspacing=" 0 "cellpadding=" 2 "> <tr> <td> password &LT;/TD&G T <td>password</td> <td><input type= "text" name= "password" controlname= "password" datatype= "password" /></td> </tr> <tr> <td> Password Confirmation </td> <td>confirm</td> <td><input type= "text" name= "confirm" controlname= "Password confirmation" confirm= "password"/></td> </tr> <tr> &LT;TD width= > English </td> <td width= "a" >english</td> <td width= "471" >&lt ; input type= "text" name= "Chinese" controlname= "English" datatype= "中文版" datalength= "4,10"/> 4~10 characters </td> </tr> <tr> <td> Chinese </td> <td>chinese</td> <td><inp UT type= "text" name= "Chinese" required= "required" controlname= "Chinese"/> Non-empty </td> </tr> <tr> <td> Digital </td> <td>number</td> <td><input type= "text" name= "number" cont Rolname= "number" databetween= "10,100"/> greater than 10, less than 100</td> </tr> <tr> <td> Integer & lt;/td> <td>integer</td> <td><input type= "text" name= "integer" controlname= "int" data Type= "integer"/></td> </tr> <tr> <td> floating point </td> <td>float&lt ;/td> &LT;TD&GT;<input type= "text" name= "float" controlname= "floating-point" datatype= "float"/></td> </tr> <tr> <td> Date </td> <td>date</td> <td><input type= "text" name= "date" control Name= "Dates" datatype= "date"/></td> </tr> <tr> <td> Mail </td> &LT;TD&G t;email</td> <td><input type= "text" name= "email" controlname= "email" datatype= "email"/></td> </tr> <tr> <td> Web site </td> <td>url</td> <td><input Type= "text" name= "url" controlname= "Web address" datatype= "url"/></td> </tr> <tr> <td&gt ; telephone </td> <td>phone</td> <td><input type= "text" name= "phone" controlname= "Telephone" data Type= "Phone"/></td> </tr> <tr> <td> Mobile </td> <td>mobile</ Td> <td><input type= "text" name= "mobile" controlname= "cell phone" datatype= "mobile"/></td> </tr> <tr> <td>ip address </td> <td>ip</td> <td><input type= "text" name= "IP" Controlnam e= "IP Address" datatype= "IP"/></td> </tr> <tr> <td> zip code </td> <td>z ipcode</td> <td><input type= "text" name= "ZipCode" controlname= "Zip Code" datatype= "ZipCode"/&GT;&LT;/TD&G T </tr> <tr> <td>qq number </td> <td>qq</td> <td><input typ E= "text" name= "QQ" Controlname= "QQ number" datatype= "IP"/></td> </tr> <tr> <td>msn </td> <td>msn</td> <td><input type= "text" name= "MSN" controlname= "MSN" datatype= " MSN "/></td> </tr> <tr> <td> ID </td> <td>idcard</td> <td> <input type= "text" name= "Idcard" controlname= "id" datatype= "idcard"/></td> </tr> <tr> &LT;TD colspan= "3" align= "left" ><input type= "Submission" name= "submit" value= "submitted"/></td> </t r> </table> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

1. ". 3" is also a floating-point number.
2.this.reg and This.tip can use
This.reg = {englisth:/^[a-za-z0-9_\-]+$/, Chinese:/^[\u0391-\uffe5]+$/}
This form, save point Code
3. Date only verify format does not validate legality

Btw:controlname's doing great.