JQuery Validate Basic Principles

Markup recommendations

Each input have a label associated with It:the For-attribute of the label refers to the id-attribute of the input.

12	<label for="firstname">Firstname</label><input id="firstname" name="fname">

The name attribute is "required" for input elements, the validation plugin doesn ' t work without it. Usually name and ID attributes should have the same value.

Methods

A validation method implements the logic to validate any element. Provided is a set of default validation methods, such as required. Apart from required itself and Equalto, all validation methods declare a element valid when it had no value at all. That's the email field is optional unless required is specified. You can specify an element input to contain a valid e-mail address, or nothing in all. Use JQuery.validator.addMethod to implement custom methods.

Rules

A Validation rule applies one or more validation methods to an INPUT element. You can specify validation rules via metadata or via plugin settings (option rules ). The decision is often influenced by serverside infrastructure. If A web framework is used, it's often easier to use metadata, which are also good for fast prototyping. Plugin settings Produce cleaner markup, though valid markup results from both.

Error Message Display

Error messages is handled via label elements with an additional class (option errorClass ). The link between the message and the invalid element are provided via the labels for attribute. When provided in the markup, they is shown and hidden accordingly, and otherwise created on demand. By default, labels was created after the invalid element, which is also customizable (option errorPlacement ). It is also possible to put them into an error container (option errorLabelContainer ). To use a different element then a label, specify the errorElement option.

Example:

$ (document). Ready (function () {var password_info = "Password should is char (both upper and low), number and symbol fr OM \ ' ~! @ # $,% ^ & * (.) ' _ + |? < >: \ "; ' \ ', length between 8~16 "; JQuery.validator.addMethod (' Regexpassword ', function (value, Element) {var password_re1 =/[ A-z]+/;var Password_re2 =/[a-z]+/;var Password_re3 =/[0-9]+/;var Password_re4 =/[[email protected]#$,%^&* (.) ' _+|?   <>: "; ']+/;function Passwdregexpcheck (passwd) {if (passwd! = NULL && passwd! =" ") {var len = passwd.length;  if (Len < 8 | | len >) {return false;  }} var rg1 = Password_re1.test (passwd);  if (Rg1 = = True) {var rg2 = password_re2.test (passwd);  if (rg2 = = True) {var rg3 = password_re3.test (passwd);  if (Rg3 = = True) {var rg4 = password_re4.test (passwd);  return RG4;  } return false;  } return false;  } return false;    }; return this.optional (Element) | |  Passwdregexpcheck (value);}, Password_info);    $ (' #password_reset_form '). Validate ({        Messages: {password: {required: "Please input a valid password", minlength: "The min length Is 8 ", MaxLength:" The max length was "}, Password_confirm: {required:" Please input a valid password again         ", Equalto:" The twice inputed passwords should be the same. "}, Rules: {password: {         Required:true, Regexpassword:true}, Password_confirm: {required:true, Rangelength: [8, +], Equalto: "#password"}}, Highlight:function (Element) {$ (element     ). Removeclass (' validate valid ');     $ (Element). addclass (' validate invalid ');     }, Unhighlight:function (Element) {$ (Element). Removeclass (' validate invalid ');          $ (Element). addclass (' validate valid ');             }, Errorelement: ' Span ', onfocusout:function (element, event) {this.element (element);         }         }); });

　　

Reference Link:

http://jqueryvalidation.org/reference/

JQuery Validate Basic Principles