[Jquery] Use jquery. Validate for client verification (Advanced>)-reasons for not using Microsoft verification controls

In the previous article, we used jquery. in validate for client verification (intermediate-level), I introduced jquery. which problems and solutions will validate encounter during daily use? Today's advanced article mainly focuses on jquery. some advanced applications of validate are introduced.

This article mainly introduces the following two points:

1,Extended verification rulesJquery. Validate only provides some basic verification functions and cannot meet our daily development needs. Therefore, we need to extend the verification rules for jquery. Validate.

2,Group verificationDuring development, a problem is that different buttons lead to different verifications.

 

First, we will introduce the first point:Extended verification rules. When jquery. Validate's default verification rules cannot meet our daily development needs, we need to specify some corresponding rules according to our business needs.. (For details, see masterpage. Master)

To expand the verification rules, we should first look at the extension methods provided by jquery. Validate for us:

Addmethod: function (name, method, message ){
$. Validator. Methods [name] = method;
$. Validator. Messages [name] = message;
If (method. Length <3 ){
$. Validator. addclassrules (name, $. validator. normalizerule (name ));
}
},

This sectionCodeIt is used to extend the verification rules, which means to add a verification method to jquery. Validate.

Three parameters are received:Name-Verification rule name

Method-Verify the rule implementation function)

Message-Error message displayed when verification fails

After we call this method, the rules we write are automatically added to the jquery. Validate rule.

Now, let's take a look at the specific implementation:

Mobile phone number verification:

Jquery. validator. addmethod ("telphonevalid", function (value, element ){
VaR Tel =/^ (130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 150 | 153 | 157 | 158 | 159 | 180 | 187 | 188 | 189) \ D {8} $ /;
Return Tel. Test (value) | this. Optional (element );
}, "Enter the correct mobile phone number ");

HereMethodNote thatMethodThe implementation function receives two elements:

Value: the value of the detected object.

Element: the object to be detected.

Here, I defined a verification rule named "telphonevalid". In the verification rule, I first defined a regular expression for mobile phone verification, and then put the value in the regular expression for verification, return the verification result. The returned error message is "enter the correct mobile phone number ".

This completes a simple extension of mobile phone number verification rules.

In fact, you can also put the extension rules in a separate js to facilitate future reuse.But I put the Extension Method in the master page because it is only a demo.

Note: The Extension Method on my side is put in jquery (document ). in ready () to ensure that the custom validation rules can be loaded into jquery each time the page is loaded. in validate.

 

Next let's talk about the 2nd points:Group verificationThis group verification is not supported by default in the default jquery. Validate, which is also very uncomfortable to me, because in the actual development process, we often encounter the need for group verification.

This verification control of Microsoft is very good. In Microsoft's controls, it is available by default.ValidationgroupIf you set the attribute name to the same name, you can perform group verification. However, jquery. Validate itself does not provide this function, so we can only expand it by ourselves.

For specific scenarios, there are two tab pages on a page. Different tab pages require different submit buttons:

These two are standard group verification cases. If you do not set group verification, after you click the [Submit basic information] and [Submit description] buttons, all the verifications on the page will be matched. This is because the two buttons are in a form, by default, the click events of the two buttons are submitted on the client side, and the code is allocated and executed on the server side, so the problem arises.

In this case, we need to introduce group verification. This solution is found on a foreign website, but I cannot find the specific address, the disadvantage of this method is that the controls to be grouped must be put into different containers, such as Div and table, because the class style is used for grouping verification.

Take a look at the specific code:

// Initialize the group verification function initvalidationgroup () {$ ('. validationgroup. causesvalidation '). click (validate); $ ('. validationgroup: text '). keydown (function (EVT) {If (EVT. keycode = 13) {var $ nextinput = $ (this ). nextall (': input: First'); if ($ nextinput. is (': Submit') {validate (EVT);} else {EVT. preventdefault (); $ nextinput. focus () ;}}) ;}function validate (EVT) {var $ group =$ (this ). parents ('. validationgro Up '); var isvalid = true; $ group. Find (': input'). Each (function (I, item) {If (! $ (Item). Valid () isvalid = false ;}); If (! Isvalid) EVT. preventdefault ();}
 

The above code is used for initialization of group verification. This code looks for elements marked with the validationgroup style on the page (the Group container ), then, find the element with the causesvalidation style in this element (this element is the button that triggers verification ),

The logic of the above Code to implement group verification is that when an element with the causesvalidation style triggers verification, it will find the parent validationgroup element of this element, then, traverse all the elements under the validationgroup element with verification rules to determine whether the verification is successful.

Page code:

<Div id = "tabs"> <ul> <li> <a href = "# baseinfo"> Basic Information </a> </LI> <li> <a href = "# personaldesc"> personal description </a> </LI> </ul> <Div id = "baseinfo" class = "validationgroup"> <Table cellpadding = "1" cellspacing = "1" border = "1" width = "50%" align = "center"> <tr> <TD> User Name </TD> <asp: textbox id = "txtuid" runat = "server"> </ASP: textbox> </TD> </tr> <TD> password </TD> <asp: textbox id = "txtpwd" validationgroup = "" textmode = "password" runat = "server"> </ASP: text </TD> </tr> <TD> Confirm Password </TD> <asp: textbox id = "txtrepwd" textmode = "password" runat = "server"> </ASP: textbox> </TD> </tr> <TD> name </TD> <asp: textbox id = "txtname" runat = "server"> </ASP: textbox> </TD> </tr> <TD> age </TD> <asp: textbox id = "txtage" runat = "server"> </ASP: textbox> </TD> </tr> <TD> gender </TD> <asp: dropdownlist id = "dropdownlist1" runat = "server" cssclass = "required" Disabled = "true"> <asp: listitem> </ASP: listitem> <asp: listitem value = "1"> male </ASP: listitem> <asp: listitem value = "0"> female </ASP: listitem> </ASP: dropdownlist> </TD> </tr> <TD> email </TD> <asp: textbox id = "txtemail" runat = "server"> </ASP: textbox> </TD> </tr> <TD colspan = "2"> <asp: button id = "button3" runat = "server" text = "Submit basic information" cssclass = "causesvalidation"/> </TD> </tr> </table> </Div> <Div id = "personaldesc" class = "validationgroup"> <p> <asp: textbox id = "txtdescription" runat = "server" textmode = "multiline" width = "500px" Height = "100px"> </ASP: textbox> </P> <asp: button id = "button1" runat = "server" text = "Description submission" cssclass = "causesvalidation"/> </div> <SCRIPT type = "text/JavaScript "> initrules (); isvalidationgroup = true; </SCRIPT>

In the analysis, the Code adds the validationgroup style to the two tab pages, the buttons that trigger verification plus the causesvalidation style, and an isvalidationgroup = true, indicating that the page needs to undergo group verification, pass back to the master page.

Note: The logic here and the handwritten JS verification rule are a logic. The default value of setting an isvalidationgroup attribute on the master page is false. It is set to true only when grouping verification is required on the page.

Next, let's take a look at the code in jquery (document). Ready () on the master page:

 
If (isvalidationgroup) {If (OPTs! = Undefined | opts! = NULL) {jquery ("# <% = form1.clientid %> "). validate (jquery. extend (OPTs, {onsubmit: false});} else {jquery ("# <% = form1.clientid %> "). validate ({onsubmit: false}) ;}initvalidationgroup () ;}else {If (OPTs! = Undefined | opts! = NULL) {jquery ("# <% = form1.clientid %> "). validate (OPTs);} else {jquery ("# <% = form1.clientid %> "). validate ();}}
 

Determine whether the isvalidationgroup requires group verification. If the isvalidationgroup is set to true, add onsubmit: false. Otherwise, the group verification fails.

 

At this point, jquery. Validate completes client verification (Advanced article-I). This article mainly introduces how to customize extension verification rules and group verification.

PS: client verification in jquery. Validate (Advanced article-) will mainly introduce how to use jquery. Validate for Ajax verification. The encapsulation and simple extension of Ajax verification are coming soon!

Source codeDownload: Click here to download