Encapsulated 10 thousand method for detecting forms _ javascript skills

This article mainly introduces a encapsulated universal detection form method, which is very easy to use and easy to use. We recommend this method to our friends. Verification of the detection form cannot be empty (. notnull)

Function: When multiple (including one) forms under a pair of form tags need to be submitted, use js to accurately determine the elements of the current button

Usage: Find the container of the current form under the form label and give class = "form", and the submit button of the current form to the class = "check"
Class = "notnull" nullmsg = "xx cannot be empty for elements that need to be verified as null! "Prompt: the form for logical judgment should be given to class =" need"
The class = "num" (only numbers are allowed) indicates that logicmsg = "XX can only be numbers"

Show the error message block to class = "errorMessage"
Show the error message to class = "warn"
Js Object-Oriented Programming not used
Logical judgment. If the need ID is not passed in, the regular expression attribute (custom) regex = "/^ \ d $/" is provided to make a judgment.

External implementation
Global. submitCallback button callback function
Global. confirmCallback confirm callback function;
Areas for improvement:
None

The Code is as follows:

///
*/
// $ (Document). ready (
// Function (){
// $ ("Form"). find (". notnull"). bind ({
// Focus: function (){
// If ($ (this). attr ("value") = this. defaultValue ){
// $ (This). attr ("value ","");
//}
//},
// Blur: function (){
// If ($ (this). attr ("value") = ""){
// $ (This). attr ("value", this. defaultValue );
//}
//}
//});
//}
//);
/// * Encapsulate the 10 thousand method for detecting forms */
/// Event. srcElement: the target object that triggers the event, which is often used for onclick events.
/// Event. fromElement: the object source that triggers the event. It is often used for onmouseout and onmouseover events.
/// Event. toElement: The target source to which the mouse moves after an event is triggered. It is often used for onmouseout and onmouseover events.
Function Global (){
Var _ self = this;
}
Global. submitCallback = null;
Global. confirmCallback = null;
$ (Document). ready (function (){
// Form body
$ ("Body"). find (". form"). each (function (){
This. onclick = function (e ){
Var button = null;
Try {
Button = e. srcElement = null? Document. activeElement: e. srcElement;
} Catch (e ){
Console. log (e. message)
Button = document. activeElement;
}
If ($ (button). is (". check ")){
// Alert ("Submit ")
Var sub = (checkform (this) & CheckInputRex (this) & checkselect (this) & checkChecked (this ));
If (sub ){
// Call our callback, but using our own instance as the context
Global. submitCallback. call (this, [e]);
}
Return sub;
} Else if ($ (button). is (". confirm ")){
// Alert ("delete ")
Var sub = confirm ($ (button). attr ("title "));
If (sub ){
Global. confirmCallback. call (this, [e]);
}
Return sub;
} Else {
//// Alert ("other ")
Return true;
}
}
});
/* Elements in the detection form that cannot be empty */
Function checkform (form ){
Var B = true;
$ (Form). find (". notnull"). each (function (){
If ($. trim ($ (this). val (). length <= 0) {// | $ (this). val () = this. defaultValue
// If (this. value! = Null ){
// $ (This). attr ("value ","");
//}
// Alert ($ (this). attr ("msg "))
$ (This). parents (". form"). find (". warn"). text ($ (this). attr ("nullmsg "));
$ (This). parents (". form"). find (". errorMessage"). show ();
$ (This). select ();
$ (This). focus ();
Return B = false;
}
});
If (B = true ){
$ (Form). find (". warn"). text ("");
$ (Form). find (". errorMessage"). hide ();
}
Return B;
}
/* Required drop-down list in the detection form */
Function checkselect (form ){
Var B = true;
$ (Form). find (". select"). each (function (I ){
Var ck = $ (this). find ('option: selected'). text ();
If (ck. indexOf ("select")>-1 ){
$ (This). parents (". form"). find (". warn"). text ($ (this). attr ("nullmsg "));
$ (This). parents (". form"). find (". errorMessage"). show ();
$ (This). select ();
$ (This). focus ();
Return B = false;
}
});
Return B;
}
/* Check box required in the detection form */
Function checkChecked (form ){
Var B = true;
$ (Form). find (". checkbox"). each (function (I ){
Var ck = $ (this) [0]. checked;
If (! Ck ){
$ (This). parents (". form"). find (". warn"). text ($ (this). attr ("nullmsg "));
$ (This). parents (". form"). find (". errorMessage"). show ();
$ (This). select ();
$ (This). focus ();
Return B = false;
}
});
Return B;
}
// Check whether the regular expression matches
Function GetFlase (value, reg, ele ){
If (reg. test (value )){
Return true;
}
$ (Ele). parents (". form"). find (". warn"). text ($ (ele). attr ("logicmsg "));
$ (Ele). parents (". form"). find (". errorMessage"). show ();
$ (Ele). focus ();
$ (Ele). select ();
Return false; // cannot be submitted
}
Function CheckInputRex (form ){
Var B = true;
$ (Form). find ("input [type = 'text']"). each (function (){
If (typeof ($ (this). attr ("regex") = 'string '){
If ($. trim ($ (this). val (). length> 0 & $ (this). val ()! = This. defaultValue ){
// The value of the current form
Var value = $ (this). attr ("value") | $ (this). val ();
Var regx = eval ($ (this). attr ("regex "));
Return B = GetFlase (value, regx, this );
}
}
});
Return B;
}
/// Check whether the corresponding characters entered by the user are valid
/// This method has been deprecated
Function CheckInput (form ){
Var B = true;
$ (Form). find (". need"). each (function (){
If ($. trim ($ (this). val (). length> 0 & $ (this). val ()! = This. defaultValue ){
// The value of the current form
Var value = $ (this). attr ("value ");
// Id value or name attribute value, for example, [name = "contact"]
Var name = $ (this). attr ("class ");
// Check whether the content to be entered is legal, for example, contact information
Var len = name. split ("");
For (var I = 0; I <len. length; I ++ ){
Switch ($. trim (len [I]) {
/// Contact information
Case "mobile ":
Var reg =/^ 1 \ d {10} $ /;
Return B = GetFlase (value, reg, this );
Break;
/// Email
Case "email ":
Var reg =/^ [\ w-] + (\. [\ w-] +) * @ [\ w-] + (\. [\ w-] +) + $ /;
Return B = GetFlase (value, reg, this );
Break;
/// Whether the two passwords are consistent
Case "password ":
Break;
Case "password2 ":
If ($ ("# password"). attr ("value ")! = $ ("# Password2"). attr ("value ")){
$ (This). select (); // obtain the focus
$ (This). parents (". form"). find (". warn"). text ($ (this). attr ("logicmsg "));
$ (This). parents (". form"). find (". errorMessage"). show ();
Return B = false; // cannot submit
}
Break;
Case "worktel ":
Case "hometel": // home phone number
Var reg =/^ \ d {8} $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "post": // zip code
Var reg =/^ \ d {6} $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "bonus ":
Case "allowance ":
Case "FixedSalary ":
Var reg =/^ -? ([1-9] \ d * \. \ d * | 0 \. \ d * [1-9] \ d * | 0? \. 0 + | 0 | [1-9] \ d) $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "identity ":
Var reg =/(^ \ d {15} $) | (^ \ d {18} $) | (^ \ d {17} (\ d | X | x) $ )/;
Return B = GetFlase (value, reg, this );
Break;
Case "height ":
Var reg =/^ [1-2] [0-9] [0-9] $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "qq ":
Var reg =/^ [1-9] [0-9] {4,} $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "begintime ":
Case "endtime ":
Var reg =/^ \ d {4} $ /;
If (reg. test (value) & (parseInt ($ (". endtime "). val ()> parseInt ($ (". begintime "). val ()))){
Return B;
}
$. LigerDialog. alert ($ (this). attr ("msg "))
$ (This). select (); // obtain the focus
Return B = false; // cannot submit
Break;
Case "num ":
Var reg =/^ \ d + $ /;
Return B = GetFlase (value, reg, this );
Break;
/// For Mainland China to go to Hong Kong, you need to apply for a Hong Kong and Macao pass and a signature for the Hong Kong and Macao pass. The private general Passport number format is as follows:
/// 14/15 + 7 digits, G + 8 digits;
/// The common cause is: P. + 7 digits;
/// Official business is: S. + 7 digits or
// S + 8 digits, starting with D is a diplomatic passport
Case "postport": // passport number
Var reg =/^ (P \ d {7} | G \ d {8} | S \ d {7,8} | D \ d + | 1 [] \ d {7 }) $ /;
Return B = GetFlase (value, reg, this );
Break;
Case "bankaccount ":
Var reg =/^ [0-9] {19} $ /;
Return B = GetFlase (value, reg, this );
Break;
} // Switch
} //
}
});
Return B;
}
/// This method has been deprecated
});
/// Click to change the background color
$ (Document). ready (function (){
Var inputs =$ ("# top>. c> input ");
$ (Inputs). each (function (){
This. onclick = function (){
Document. getElementById ("main"). style. backgroundColor = this. name;
// $ ("# Main"). backgroundColor = this. name;
}
});
});

The above code is the encapsulated universal detection form method. I hope my friends will like it.