Post: client form universal verification checkform (oform) JS version

* --------------- Client form universal verification checkform (oform )-----------------
* Book Program It was initially modified based on the checkform of wanghr100 (Baby gray bean. net) and added many functions, as shown below:
* 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 one and all
* 5. encapsulated (class_check)
* 6. External functions or expressions are supported (the password is the same in the application)
* 7. The call method is simplified. For all operations, you only need to <script language = 'javascript 'src = 'checkform. js'>,
Then define the tag validation formats in HTML.
* 8. added restrictions on keyboard input for IE (for example, when usage = 'int' is defined, only numbers can be entered in the input box (non-ie is invalid)
* 9. added no verification for disabled.
* 10. Customize the alarm method (rewrite the showmessageex method)

* ----------------------------- Declarative information -----------------------------
*
* Author: ttyp
* Email: ttyp@21cn.com
* Blog: http://www.cnblogs.com/ttyp/
* Statement: This program can be reproduced and disseminated at will, but please keep these statements. Some built-in expressions are not very strict. If you
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, expression, or function
Exp: Regular Expression (ignore exp if usage is specified)
Tip: error message (if it is a built-in format, do not use this attribute, there is a default prompt)

When calling, you only need to reference <script language = 'javascript 'src = 'checkform. js'>, and then
Add the preceding three attributes (not necessarily all)

* Original Author: wanghr100 (Baby gray bean. Net)
* Email: wanghr100@126.com
*
* --------------- Client form universal verification checkform (oform )-----------------
*/
//////////////////////////////////////// ////////////////////////////////////////

Function class_check ()
{
This. Pass = true; // whether the verification is successful
This. showall = true; // whether all verification errors are displayed
This. Alert = false; // Alarm Method (Alert alarm by default)
This. Message = ""; // error message
This. 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 number
"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
// Email
"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 -./? % & =] *)? $ ", // Join
"Chinese": "^ [\ u4e00-\ u9fa5 \ uf900-\ ufa2d] + $", // only Chinese
"ASCII": "^ [\ x00-\ xFF] + $", // only the acsii 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 + $", // not empty
"Picture": "(. *) \. (JPG | BMP | GIF | ICO | PCX | JPEG | TIF | PNG | raw | TGA) $", // picture
"RAR": "(. *) \. (RAR | zip | 7zip | tgz) $", // compress the 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 Positive floating point number", // Positive floating point number
"Float-": "enter a negative floating point number", // negative floating point number
"Email": "enter the correct email address", // email
"Color": "enter the correct color", // color
"Url": "enter the correct connection address", // connect
"Chinese": "enter Chinese", // Chinese
"ASCII": "Please enter ASCII characters", // only acⅱ characters
"Zipcode": "enter the correct zip code", // zip code
"Mobile": "enter the correct mobile phone number", // mobile phone number
"Ip4": "enter the correct IP Address", // ip address
"Notempty": "cannot be empty", // not empty
"Picture": "select an image", // picture
"RAR": "Enter the compressed file", // compress the 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 none is used, the expression is regarded as an expression. The expression can be a function;
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)
{< br> setfocus (ELS [I]);
break;
}< BR >}< br> catch (e)
{< br> alert ("expression [" + susage + "] error: "+ E. description)
return false;
}< BR >}< br> else
{< br> sreg = els [I]. getattribute ("exp");
}

If (typeof (sreg )! = "Undefined" & sreg! = NULL)
{
// Do not verify the failure status
If (isdisabled (ELS [I]) = true)
{
Continue;
}

// Obtain the value of the form, using a 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" appears.
VaR STIP = getmessage (ELS [I]);
If (STIP. Length = 0 & typeof (susage )! = "Undefined" & susage! = NULL & amessage [susage]! = NULL)
{
STIP = amessage [susage];
}
Addmessage (STIP );

If (Me. showall = false)
{
// This form Element gets the focus and uses the universal return Function
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> ";
}
}

/*
* Display Error
*/
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 = "diverrormessage ";
Divtip. Name = "diverrormessage ";
Divtip. style. color = "red ";
Document. Body. appendchild (divtip );
}

Divtip. innerhtml = me. message;
} Catch (e ){}
}
}

/*
* Obtain whether the element is invalid (the invalid element is not judged)
*/
Function isdisabled (EL)
{
// For radio and checkbox elements, verification is performed as long as there is a non-invalid element.
If (El. type = "radio" | El. type = "checkbox ")
{
// Retrieve 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 value of an object (for a Single-choice-multiple-choice box, set the number of objects selected as the value to be verified)
*/
Function getvalue (EL)
{
// Obtain the type of the form Element
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;
// Multiple single drop-down menus, traverse all options to obtain the number of selected results. "0" indicates that one is selected, and "00" indicates that two are selected.
Case "checkbox ":
Case "radio": Return getradiovalue (EL );
Case "select-one ":
Case "select-multiple": Return getselectvalue (EL );
}
// Obtain the selected number of radio and checkbox. "0" is used to represent the selected number. When writing a regular expression, 0 {1,} can be used to represent the selected number.
Function getradiovalue (EL)
{
VaR svalue = "";
// Retrieve 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;
}
// Obtain the select number. "0" is used to represent the selected number. When writing a regular expression, we can use 0 {1,} to represent the selected number.
Function getselectvalue (EL)
{
VaR svalue = "";
For (VAR I = 0; I <El. Options. length; I ++)
{
// In the single-choice drop-down box, the prompt option is set to value = ""
If (El. Options [I]. Selected & El. Options [I]. value! = "")
{
Svalue + = "0 ";
}
}
Return svalue;
}
}

/*
* Set focus for elements that fail Verification
*/
Function setfocus (EL)
{
// Obtain the type of the form Element
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 focus of the non-invalid control.
Case "checkbox ":
Case "radio ":
VaR els = Document. 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 bind the onsubmit event to All Forms
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 ("onsubmit", 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 (oform)
{
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;
}
}
}
}
}
}

// initialization
var g_check = new class_check ();
g_check.keycheck ();