Comparison of Fancy Validate and Jquery.validate application

1. Ordinary class Rules:

The code is as follows	Copy Code
<input class= "required email URL date dateiso datede number numberde digits CreditCard"/>

Separate rules are separated by spaces, Note: This method only supports the rules listed above, if you need to use rules with parameters (such as minlength), you need to use the JSON format rule.

2. Rules to define JSON format:

The code is as follows	Copy Code
<input class= "{required:true, Email:true, messages:{required: ' Please enter your email address ' and email: ' Please enter a Valid email address '}} '/>

Define the rules and corresponding messages in a pair of "{..}" Curly braces.

3. Defined in the custom meta (in class)

To not mix with some styles, you can use a custom meta to first set up meta in JavaScript code:

The code is as follows	Copy Code
$ ("#form1"). Validate ({meta: "validate"});

Then, write the validation rule in the custom meta:

The code is as follows	Copy Code
<input class= "{validate:{required:true, Email:true, messages:{required: ' Please enter your email address ', email: ' Please enter a valid email address '}} '/>

4. Customizing HTML properties

First, set the custom HTML properties in the JavaScript code:

The code is as follows	Copy Code
$.metadata.settype ("attr", "data-validate"); then, use: <input data-validate= "{required:true, Email:true, messages:{required: ' Please enter your email address ', email: ' Please enter a valid email address '}} '/>5 the HTML attribute corresponding to the rule name

It also supports the following ways to define rules:

The code is as follows	Copy Code
<input Required email= "true" minlength= "3" maxlength= "ten"/>

These attributes (Required,email,minlength, etc.) correspond to existing rules

The way Fancy Validate support
Fancy Validate does not jquery.validate so much trouble in a way that it only supports defining rules in custom HTML properties, using the "Data-val" attribute by default.

code is as follows

copy code

<input Data-val= "Required,email,numeric"/> <input data-val= "Required,email,numeric,minlength:1,maxlength:10"/ <input data-val= "required,email,numeric,minlength:1,maxlength:10,messages:{required: ' Must fill in ', Email: ' Incorrect mailbox format '} '/> <input data-val= ' rules:{required,email,numeric} '/> <input data-val= ' rules:{ Required:1,email:1,maxlength:10},messages:{required: ' must fill in ', Email: ' Mailbox format incorrect '} '/> <input data-val= ' rules: {required:1,email:1,maxlength:10,messages:{required: ' must fill in ', Email: ' Mailbox format incorrect '}} '/>

You don't need to distinguish between class,json or anything, you can mix writes, and you can use other custom HTML properties by changing the ruleattr parameter:

$f ("Fancyform", {ruleattr: "Data-validate"}), and Fancy validate also supports HTML5 properties
It is primarily required/min/max/pattern four rules and uses custom Placeholder/watermark effects for browsers that do not support HTML5 placeholder properties:

The code is as follows	Copy Code
<input name= "Age" placeholder= "enter ages" required pattern= "^d+$" min= "ten" max= "/>"

The corresponding hint information needs to be defined in JavaScript code:

The code is as follows

Copy Code

$f ("Fancyform", { Messages: { Age: { Required: "Age must be filled in", Pattern: "Must be a number" } } ); Define rules in JavaScript code Jquery.validate: $ ("#fancyform"). Validate ({ Rules: { Lwmeatcnblogs: {required:true, email:true, Minlength:7} } , messages: { Lwmeatcnblogs: {required: "Must fill in", Email: "Email format is not correct"} } }); Fancy validate is similar, except that messages can be defined in the rules: Mode 1 $f ("Fancyform", { Rules: { Lwmeatcnblogs: {required:1, email:1, Minlength:7} } , messages: { Lwmeatcnblogs: {required: "Must fill in", Email: "Email format is not correct"} } }); Mode 2 $f ("Fancyform", { Rules: { Lwmeatcnblogs: {required:1, email:1, Minlength:7 , messages: {required: "Must fill in", Email: "Email format is not correct"} } } });

Key name of the rule and support for ASP.net
If you have the following form elements:

<input name= "Lwmeatcnblogs"/> uses JavaScript to define rules, the Name property of the form element is the key name of the rule (here is lwmeatcnblogs).

Jquery.validate The Name property is used by default and can not be changed (at least no configurable parameters are found, so let me change its implementation?) Fancy Validate also uses the Name property by default, but provides 2 parameters (Rulekey and Rulekeyalter) to change the key name, so you don't have to worry about writing a bunch of asp.net in ClientID.

Like the following, a typical control in asp.net:

code is as follows

copy code

<input id=" ctl00_panel1_lwmeatcnblogs "Name=" ctl00$panel1$lwmeatcnblogs "/>jquery.validate has to use Clientid/uniqueid, and for fancy validate you can add a custom HTML attribute and customize the Rulekey property: <input id= "Ctl00_panel1_lwmeatcnblogs" name= "Ctl00$panel1$lwmeatcnblogs" data-rule= "Lwmeatcnblogs"/>  $f ("Fancyform ", {     rules: {       lwmeatcnblogs: {required:1, email:1, minlength: 7}    }    , messages: {       lwmeatcnblogs: {req Uired: "Must fill in", Email: "Email format is incorrect"}    }    , Rulekey: "Data-rule"  });

If the id/name of most of the form elements in the page are normal, but only a small portion of the id/name is asp.net-specific, you can customize Rulekeyalter properties:

The code is as follows

Copy Code

<input id= "LWMEATCNBLOGS1" name= "LWMEATCNBLOGS1"/> <input id= "LwmeAtCnblogs2" name= "LwmeAtCnblogs2"/> ... <input id= "Ctl00_panel1_lwmeatcnblogs" name= "Ctl00$panel1$lwmeatcnblogs" data-rule= "LwmeAtCnblogs"/> $f (" Fancyform ", { Rules: { ... Other rules Lwmeatcnblogs: {required:1, email:1, Minlength:7} } , messages: { ... Tips for other rules Lwmeatcnblogs: {required: "Must fill in", Email: "Email format is not correct"} } , Rulekeyalter: "Data-rule" In addition to Rulekey/rulekeyalter,fancy validate provides a simple function to extract the server-side ID from the form element's Name property, so you can use this as well: $f ("Fancyform", { ... Rules and Hints , Getkey: $f. getkeyforaspnet }); Some display methods

Display in Container
Jquery.validate to display the error message in the container, you need to specify the Errorcontainer parameter:

The code is as follows	Copy Code
$ ("#form1"). Validate ({ .. Various rules Errorcontainer:container, ), and fancy validate cancels the Errorcontainer parameter and uses the custom Appendlabel function: $f ("Fancyform", { ... Various rules , Validcls: "" , Container:document.getElementById ("container") , Appendlabel: $f. Appendcontainer });

You also need to specify container, but only in the $f.appendcontainer function.