Common Client Form Verification checkForm (oForm) js

* --------------- Client form universal verification checkForm (oForm) --------------- * this program was initially developed by wanghr100 (Baby gray bean.. net). * 1. non-ie support * 2. added built-in expressions and built-in prompts * 3. added the display mode (pop-up and page display) * 4. added "show one and show all" * 5. encapsulated (CLASS_CHECK) * 6. supports external functions or expressions (Consistent passwords in applications) * 7. the call method is simplified. All operations only require <script language = 'javascript 'src = 'checkform. js '>, and then define the tag validation format in HTML * 8. restrictions on keyboard input are added to IE (for example, when usage = 'int' is defined, only numbers can be entered in the input box (not valid for IE) * 9. added non-verification for disabled * 10. custom alert method (override showMessageEx method) * ------------------------------- declarative information ------------------------------- ** Author: ttyp * Email: ttyp@21cn.com * blog: http://www.cnblogs.com/ttyp/ * Statement: can be any replication spread to this program, however, please keep these statements. Some built-in expressions are not very strict. If you have good suggestions and comments, please contact me via email or leave a message on my blog * Introduction: this program only needs to set three attributes for the tag to be verified: usage, exp, tip usage: built-in format or expression or Function exp: regular Expression (ignore exp if usage is specified) tip: Error prompt (if it is a built-in format, do not use this attribute, there is a default prompt) you only need to reference <script language = 'your crip T 'src = 'checkform. js '>, and then add the above three attributes for each tag (not necessarily all) * Original Author: wanghr100 (Baby gray bean. net) * email: wanghr100@126.com ** --------------- client form common verification checkForm (oForm) -----------------*////////////////////////////////////// //////////////////////////////////////// /// function CLASS_CHECK () {this. pass = true; // whether this is verified. showAll = true; // whether to display all verification errors this. alert = false; // Alarm Method (default alert alarm) this. message = ""; // error message th Is. first = null; // The first error control (used to return to focus) When all verification errors are displayed // define the built-in format var aUsage = {"int ": "^ ([+-]?) // D + $ ", // integer" int + ":" ^ ([+]?) // D + $ ", // positive integer" int-":" ^-// d + $ ", // negative integer" num ": "^ ([+-]?) // D *//.? // D + $ ", // number" num + ":" ^ ([+]?) // D *//.? // D + $ ", // positive value" num-":" ^-// d *//.? // D + $ ", // negative number" float ":" ^ ([+-]?) // D * //. // d + $ ", // floating point number" float + ":" ^ ([+]?) // D *//. // d + $ ", // Positive floating point number" float-":" ^-// d *//. // d + $ ", // negative floating point number // mail" email ":" ^ // w + (-/w +) | (//. // w +) * // @ [A-Za-z0-9] + ((//. |-) [A-Za-z0-9] + )*//. [A-Za-z0-9] + $ "," color ":" ^ # [a-fA-F0-9] {6} ", // color" url ":" ^ http [s]?: // ([// W-] + //.) + [// w-] + ([// w -./? % & =] *)? $ ", // Connect" chinese ":" ^ [// u4E00-// u9FA5 // uF900-// uFA2D] + $ ", // chinese only" ascii ": "^ [// x00-// xFF] + $", // only the acⅱ character "zipcode": "^ // d {6} $ ", // zip code "mobile": "^ 0 {0, 1} 13 [0-9] {9} $", // mobile phone "ip4 ": "^ // d {1, 3 }//. // d {1, 3 }//. // d {1, 3 }. // d {1, 3} $ ", // ip address" notempty ":" ^ // S + $ ", // non-empty" picture ":"(. *)//. (jpg | bmp | gif | ico | pcx | jpeg | tif | png | raw | tga) $ ", // image" rar ":"(. *)//. (rar | zip | 7zip | tgz) $ ", // compressed file" date ":" ^ // d {4} (//-| // | /.) // d {1, 2} // 1/ /D {1, 2} $ "// Date}; // default message var aMessage = {" int ":" enter an integer ", // integer" int + ": "Enter a positive integer", // positive integer "int-": "enter a negative integer", // negative integer "num": "enter a number ", // number "num +": "enter a positive number", // positive number "num-": "enter a negative integer", // negative number "float ": "Enter a floating point number", // floating point number "float +": "enter a Positive floating point number", // floating point number "float-": "enter a negative floating point number ", // negative floating point number "email": "enter the correct email address", // mail "color": "enter the correct color", // color "url ": "Enter the correct connection address", // connect "chinese": "enter chinese", // chinese "ascii": "Enter ascii characters ", // only the acⅱ character "zipco De ":" enter the correct zip code ", // zip code" mobile ":" enter the correct mobile phone number ", // mobile phone" ip4 ": "Enter the correct IP Address", // ip address "notempty": "cannot be blank", // non-empty "picture": "select image ", // image "rar": "Enter the compressed file", // The compressed file "date": "enter the correct date" // date} var me = this; function checkForm (oForm) {me. pass = true; me. message = ""; me. first = null; var els = oForm. elements; // traverse all table elements for (var I = 0; I <els. length; I ++) {// obtain the format var sUsage = els [I]. getAttribute ("Usage"); var sReg = ""; // If Usage is set, use the built-in regular expression to ignore Exp if (typeof (sUsage )! = "Undefined" & sUsage! = Null) {// if Usage is found in the expression room, the built-in expression is used. if not, the expression can be an expression. if (aUsage [sUsage]! = Null) {sReg = aUsage [sUsage];} else {try {if (eval (sUsage) = false) {me. pass = false; if (me. first = null) {me. first = els [I];} addMessage (getMessage (els [I]); if (me. showAll = false) {setFocus (els [I]); break ;}} catch (e) {alert ("expression [" + sUsage + "] error: "+ e. description) return false ;}} else {sReg = els [I]. getAttribute ("Exp");} if (typeof (sReg )! = "Undefined" & sReg! = Null) {// do not verify if (isDisabled (els [I]) = true) {continue;} // obtain the form value for the failure state, use the common value function var sVal = getValue (els [I]); // string-> regular expression, case-insensitive var reg = new RegExp (sReg, "I "); if (! Reg. test (sVal) {me. pass = false; if (me. first = null) {me. first = els [I];} // alert (reg); // if the verification fails, the prompt "warning var sTip = getMessage (els [I])" is displayed. if (sTip. length = 0 & typeof (sUsage )! = "Undefined" & sUsage! = Null & aMessage [sUsage]! = Null) {sTip = aMessage [sUsage];} addMessage (sTip); if (me. showAll = false) {// focus of the form element. Use the setFocus (els [I]); break ;}}} if (me. pass = false) {showMessage (); if (me. first! = Null & me. showAll = true) {setFocus (me. first) ;}} return me. pass;}/** add error message */function addMessage (msg) {if (me. alert = true) {me. message + = msg + "/n";} else {me. message + = msg + "<br>" ;}}/** error displayed */function getMessage (els) {var sTip = els. getAttribute ("tip"); if (typeof (sTip )! = "Undefined" & sTip! = Null) {return sTip;} else {return "" ;}}/** Display Error */function showMessage () {// external Display error function if (typeof (me. showMessageEx) = "function") {return me. showMessageEx (me. message);} if (me. alert = true) {alert (me. message);} else {var divTip; divTip = document. getElementById ("divErrorMessage"); try {if (typeof (divTip) = "undefined" | divTip = null) {divTip = document. createElement ("div"); divTip. id = "div ErrorMessage "; divTip. name = "divErrorMessage"; divTip. style. color = "red"; document. body. appendChild (divTip);} divTip. innerHTML = me. message;} catch (e) {}}/ ** get whether the element is invalid (no judgment is made for the element that is invalid) */function isDisabled (el) {// for radio, the checkbox element, which verifies if (el. type = "radio" | el. type = "checkbox") {// obtain the name of the first element and search for this element group var tmpels = document. getElementsByName (el. name); for (var I = 0; I <tmpels. length; I ++) {If (tmpels [I]. disabled = false) {return false;} return true;} else {return el. disabled;}/** get the object value (for a Single-choice multiple-choice box, use the selected number as the value to be verified) */function getValue (el) {// obtain the form Element type var sType = el. type; switch (sType) {// text input box. The value is el. value case "text": case "hidden": case "password": case "file": case "textarea": return el. value; // a single drop-down menu that traverses all options to obtain the number of selected items. The returned result is "0", indicating that one is selected. "00" indicates that two cases "checkbox": case "radio are selected. ": Return getRadioValue (el); case" select-one ": case" select-multiple ": return getSelectValue (el) ;}// obtain the number of radio and checkbox selections, "0" is used to represent the selected number. When writing a regular expression, we can use 0 {1,} to indicate the selected number. function getRadioValue (el) {var sValue = ""; // obtain the name of the first element and search for this element group var tmpels = document. getElementsByName (el. name); for (var I = 0; I <tmpels. length; I ++) {if (tmpels [I]. checked) {sValue + = "0" ;}} return sValue ;}// gets the select number, which is expressed by "0 ". Number in, we can use 0 {1,} to indicate the number of selected functions getSelectValue (el) {var sValue = ""; for (var I = 0; I <el. options. length; I ++) {// The Single-choice drop-down box prompts that the option is set to value = "" if (el. options [I]. selected & el. options [I]. value! = "") {SValue + = "0" ;}} return sValue ;}}/** set focus for elements that have not passed verification */function setFocus (el) {// obtain the form Element type var sType = el. type; switch (sType) {// text input box, with the cursor positioned at the end of the text input box case "text": case "hidden": case "password": case "file ": case "textarea": try {el. focus (); var rng = el. createTextRange (); rng. collapse (false); rng. select () ;}catch (e) {}; break; // select multiple items. The first option is the non-invalid control, which gets the focus case "checkbox": case "radio": var els = d Ocument. getElementsByName (el. name); for (var I = 0; I <els. length; I ++) {if (els [I]. disabled = false) {els [I]. focus (); break ;}} break; case "select-one": case "select-multiple": el. focus (); break; }}// automatically binds the onsubmit event if (window. attachEvent) {window. attachEvent ("onload", function () {for (var I = 0; I <document. forms. length; I ++) {var theFrom = document. forms [I]; if (theFrom) {theFrom. attachEvent ("onsub Mit ", function () {return checkForm (theFrom) ;}}}) ;}else {window. onsubmit = function (e) {var theFrom = e.tar get; if (theFrom) {return checkForm (theFrom) ;}} this. keyCheck = function () {if (window. attachEvent) {window. attachEvent ("onload", function () {for (var I = 0; I <document. forms. length; I ++) {var theFrom = document. forms [I]; if (theFrom) {myKeyCheck (theFrom) ;}});} else {// TOOD} function myKeyCheck (o Form) {var els = oForm. elements; // traverse all table elements for (var I = 0; I <els. length; I ++) {// obtain the format var sUsage = els [I]. getAttribute ("Usage"); // if Usage is set, use the built-in regular expression to ignore Exp if (typeof (sUsage )! = "Undefined" & sUsage! = Null) {switch (sUsage. toLowerCase () {case "zipcode": case "int": els [I]. onkeypress = function () {return // d /. test (String. fromCharCode (event. keyCode) | (this. value. indexOf ('+') <0? String. fromCharCode (event. keyCode) = "+": false) | (this. value. indexOf ('-') <0? String. fromCharCode (event. keyCode) = "-": false);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "mobile": case "int +": els [I]. onkeypress = function () {return // d /. test (String. fromCharCode (event. keyCode) | (this. value. indexOf ('+') <0? String. fromCharCode (event. keyCode) = "+": false);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "int-": els [I]. onkeypress = function () {return // d /. test (String. fromCharCode (event. keyCode) | (this. value. indexOf ('-') <0? String. fromCharCode (event. keyCode) = "-": false);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "float": case "num": els [I]. onkeypress = function () {return/[/+/-/.] |/d /. test (String. fromCharCode (event. keyCode);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "float +": case "num +": els [I]. onkeypress = function () {return/[/+/.] |/d /. test (String. fromCharCode (event. keyCode);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "float-": case "num-": els [I]. onkeypress = function () {return/[/-/.] |/d /. test (String. fromCharCode (event. keyCode);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break; case "ascii": els [I]. style. imeMode = "disabled"; break; case "ip4": els [I]. onkeypress = function () {return/[/.] |/d /. test (String. fromCharCode (event. keyCode);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; els [I]. maxLength = 15; break; case "color": els [I]. onkeypress = function () {return/[a-fA-Z] |/d /. test (String. fromCharCode (event. keyCode) | (this. value. indexOf ('#') <0? String. fromCharCode (event. keyCode) = "#": false);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. maxLength = 7; els [I]. style. imeMode = "disabled"; break; case "date": els [I]. onkeypress = function () {return/[//-/.] |/d /. test (String. fromCharCode (event. keyCode);} els [I]. onpaste = function () {return! ClipboardData. getData ('text '). match (// D/);} els [I]. ondragenter = function () {return false;} els [I]. style. imeMode = "disabled"; break ;}}}}// initialize var g_check = new CLASS_CHECK (); g_check.keyCheck ();