One practical application after learning jquery-page form verification (suitable for large-scale applications)

The expression verification function is as follows:

1. For each form input control, you can set matching expressions and corresponding prompt information at the custom and basic levels;

2. When the user leaves the form input control, it will automatically verify. If the verification is invalid, the border background color of the control will become red.

3. If you register and check the code of all form input controls on the Save button, all input form controls will be checked when you click the Save button. Invalid background colors will become red,

The focus is automatically located on the second control that contains 1st invalid input, and does not trigger a send-back event.

4. Place the cursor over an invalid expression control and the input prompt is displayed below the control.

Advantages: 1. The expression and prompt information can be verified through the Server property registration, which is easy for programmers to use and can be extended to obtaining the setting information from the database;

2. alternative to the expression verification control provided by ASPnet, it can reduce the impact of the verification control on the layout, because the verification is integrated with the input control, increasing maintainability.

Page Form Verification Code:

Note: baseregexp is a basic validation expression, orgregexp is a regular expression at the organization level, and entregexp is an enterprise-level validation expression. For general applications, only baseregexp is required.

(Function (){
VaR invalidationcheck = function (){

// Input matching detection
Function checkvalidation (input, Regexp)
{
If (! Input)
{
Input = "";
}
VaR thematch = input. Match (Regexp );
If (thematch)
{
Return true;
}
Else
{
Return false;
}
}

// Create or obtain a prompt box. If the input of the Form Control is invalid, the first is that the border color of the control changes, but the rule information is displayed when the mouse passes, which is friendly to the customer.
Function createmsgdiv (MSG)
{
VaR thediv = $ ('# mymessagediv ');
If (thediv. Length <= 0)
{
Thediv = $ ("<Div id = 'mymessagediv 'class = 'mytooltip' style = 'display: Block'>" + MSG + "</div> ");
}
Return thediv;
}
// Obtain the position of the element.
Function getelementpos (EL)
{
VaR op = El [0];
VaR thex = op. offsetleft;
VaR they = op. offsettop;
While (OP = op. offsetparent)
{
Thex + = op. offsetleft;
They + = op. offsettop;
}
Return [thex, They];
}
// Obtain the input Rule Information, used to prompt the user.
Function getinputregulation (OBJ)
{
VaR theret = obj. ATTR ("inputregmsg ");
Return (theret = NULL )? "": Theret );
}

// Set the status of the form input control. True indicates that the input is valid, and false indicates that the input is invalid.
Function setinputstate (OBJ, state)
{
If (State = false)
{
OBJ. ATTR ("inputstate", "false ");
}
Else
{
OBJ. ATTR ("inputstate", "true ");
}
}

// Obtain the status of the input control.
Function getinputstate (OBJ)
{
Return (obj. ATTR ("inputstate ")! = "False ")? True: false;
}

// Save the style of the Form Control, which can be restored once the input is valid

Function setoldclassname (OBJ)
{
VaR theoldstyle = obj. ATTR ("oldclassname ");
If (theoldstyle = NULL)
{
VaR theclass = obj. ATTR ("classname ");
If (! Theclass)
{
Theclass = "";
}
OBJ. ATTR ("oldclassname", theclass );
}
}

// Obtain the name of the current style class
Function getcurrclassname (OBJ, isvalid)
{
VaR thestyle = NULL;
If (isvalid = true)
{
Thestyle = obj. ATTR ("oldclassname ");
If (! Thestyle)
{
Thestyle = "";
}
}
Else
{
Thestyle = "inputisinvalid ";
}

Return thestyle;
}

// Set the current display style.
Function setcurrdisplaystyle (OBJ, isvalid)
{
OBJ. ATTR ("classname", getcurrclassname (OBJ, isvalid ));
}

// Check all Form Controls, applicable to the Save button.
Function checkallinput ()
{
VaR thefirstinvalidobj = NULL;
// Process the input box
VaR inputs = $ (': Text: enabled, textarea: enabled, select: enabled ');
For (VAR I = 0; I <inputs. length; I ++)
{
// Obtain orgregexp
VaR thecurrinput = $ (inputs [I]);
VaR thecurrok = true;
Setoldclassname (thecurrinput );
VaR theorgre = thecurrinput. ATTR ("orgregexp ");
If (theorgre)
{
Thecurrok = checkvalidation (thecurrinput. Val (), theorgre );
Setcurrdisplaystyle (thecurrinput, thecurrok );
If (thecurrok = false)
{
Setinputstate (thecurrinput, false );
If (! Thefirstinvalidobj)
{
Thefirstinvalidobj = thecurrinput;
}
Continue;
}
}
// Obtain the Basic Validation expression
VaR thebasere = thecurrinput. ATTR ("baseregexp ");
If (thebasere)
{
Thecurrok = checkvalidation (thecurrinput. Val (), thebasere );
Setcurrdisplaystyle (thecurrinput, thecurrok );
If (thecurrok = false)
{
If (! Thefirstinvalidobj)
{
Thefirstinvalidobj = thecurrinput;
}
}
}
Setinputstate (thecurrinput, thecurrok );
}

// Obtain the first illegal form control, which is automatically located by default.
Return thefirstinvalidobj;
}
This. showtooltipmsg = function (Event)
{
VaR OBJ = $ (this );
If (getinputstate (OBJ) = false)
{
VaR MSG = getinputregulation (OBJ );
If (MSG)
{
VaR thediv = createmsgdiv (MSG );
Thediv. appendto ('body ');
VaR thepos = getelementpos (OBJ );
Thediv.css ("Left", thepos [0] + event. offsetx + "PX ");
Thediv.css ("TOP", thepos [1] + 23 + "PX ");
}
}
}
This. hiddentooltipmsg = function (Event)
{
VaR OBJ = $ (this );
If (getinputstate (OBJ) = false)
{
VaR thediv = $ ("# mymessagediv ");
If (thediv. length> 0)
{
$ ("Body") [0]. removechild (thediv [0]);
}
}
}
This. dovalidationalbert = function ()
{
VaR thefirstobj = checkallinput ();
If (thefirstobj)
{
Try
{
Thefirstobj. Focus ();
}
Catch (Ex)
{
}
Return false;
}
Return true;
}
This. checkinputvalidation = function ()
{
// Obtain orgregexp
VaR thecurrinput = $ (this );
VaR thecurrok = true;
// Set the old style class.
Setoldclassname (thecurrinput );
VaR theorgre = thecurrinput. ATTR ("orgregexp ");
If (theorgre)
{
Thecurrok = checkvalidation (thecurrinput. Val (), theorgre );
Setcurrdisplaystyle (thecurrinput, thecurrok );
}
If (thecurrok = false)
{
Setinputstate (thecurrinput, false );
Return;
}
// Obtain the Basic Validation expression
VaR thebasere = thecurrinput. ATTR ("baseregexp ");
If (thebasere)
{
Thecurrok = checkvalidation (thecurrinput. Val (), thebasere );
Setcurrdisplaystyle (thecurrinput, thecurrok );
}
Setinputstate (thecurrinput, thecurrok );
}
This. init = function ()
{
$ (': Text: enabled, textarea: enabled, select: enabled'). mouseenter (this. showtooltipmsg)
. Mouseleave (this. hiddentooltipmsg)
. Mousemove (this. showtooltipmsg)
. Keypress (this. hiddentooltipmsg)
. Blur (this. checkinputvalidation );
$ (Document. Forms [0]). Submit (this. dovalidationalbert );
}
}
$ Inputcheck = new invalidationcheck ();
})();
Usage: To run the code, the jquery library is required. If you do not need intermediate sending back, you only need to call init to initialize it. To verify the regular expression, you can add it by registering the attribute using the server-side service control.

If sending back is required, the control event triggers the function hook, which must be completed on the server side.

If you use a server control, there are two ways to verify the expression and prompt information: one is to register properties for the control, the other is to simply inherit the control, use the required information as the property of the server control and output it to the client property. I personally prefer the latter method, because in this way, programmers can use what they see is what they get, and the verification information can be read from the database, suitable for large-scale applications, event registration can also be automatically completed in the control, eliminating the trouble of client registration or manual setting.