JQuery Validate plug-in features and usage details _jquery

This example describes the jquery validate plug-in functionality and usage. Share to everyone for your reference, specific as follows:

Preface: to form the content format verification, the original JS writing, more cumbersome, the author once wrote a registration interface, verify the mailbox format, user name format, password format, many use the regular, and error message should also use display:none/display hidden, After using the jquery validate plug-in, then greatly accelerate the development speed!

1.jQuery Validate plug-in provides a powerful verification function, the jquery Validate plugin's official website is http://jqueryvalidation.org/, the official website has detailed document to introduce the jquery plug-in usage method. For the use of Plug-ins

(1) First download Jquery.validate.js plugin

Then insert in the HTML file

<script type= "Text/javascript" src= "js/jquery-1.11.3.js" ></script>
<script type= "text/" JavaScript "src=" Js/jquery.validate.js "></script>
<script type=" Text/javascript "src=" Js/js1.js " ></script>

Because the jquery plug-in is based on the jquery library, you must import the Jquery.js file before you import the jquery validate.js file

(2) The JQuery Validate plug-in provides $ (form). Validate (Options) method, the plug-in with required numbers, text and other validation rules

Where form represents the name of the form element, the options represent the configuration object when the Validate method is invoked, and all the configuration information and exception information display rules are included in the object options.

2. There are a number of ways to use the jquery validate, which details how to validate form rules by using the form element name.

That is, there is no direct contact with HTML elements, but by the Name property to associate fields and validation rules, this method can achieve the separation of behavior and structure.

<form id= "FORM-SP" >
 <fieldset>
<legend> User login </legend>
<p>
< Label for= "username" > Username </label>
<input type= "text" name= "username"/>
</p>
  <p class= "Tip" ></p>
<p>
<label for= "password" > password </label>
  <input type= " Password "name=" password "/>
</p>
<p class=" Tip "></p>
<p>
< Label for= "Confirm-password" > Reenter </label>
<input type= "password" name= "Confirm-password"/>
</p>
<p class= "Tip" ></p>
  <label for= "Verify" ></label>
  < Input type= "button" value= "OK" name= "verify" id= "Btn-ver"/>
  </fieldset>
</form>

This HTML file for the appeal, we can write the following validation rules:

$ ("#form-sp"). Validate ({
rules:{
username:{
required:true,
minlength:3
},
password:{
Required:true,
minlength:6
},
"Confirm-password": {
required:true,
equalto: "#password"
}
,
messages:{
username:{
Required: "Please enter your username",
minlength: "Enter at least three-bit username"
}
},
errorplacement:function (error,element) {
  error.appendto (element.parent (). Next ());
}
)

After running this code, it appears as

We found that after customizing the rule, the form comes with a validation method, and here we look at the role of the specific attribute in the Validate object

(1) First in the rules attribute, we determine the rules for each form element based on the form's name:

Like Required:true.

Description user Name This form element, cannot be empty,

Minlength:2, indicating that the user name is at least 2 characters

Maxlength:10, representing a character with a username of up to 10 digits

(2) Secondly, in the messages attribute, the error message is defined when the information in the form does not conform to the rule.

If not modified, the default is the English prompt. Here we have modified the required of the username form element: The error message for the property

Because when the error is prompted, " enter at least three user names "

3. Learn about the two basic attributes of the jquery validate plugin rules and messages,

The following jquery validate default validation form:

1	Required:true	The field that must be entered.
2	Remote: "check.php"	Use the Ajax method to invoke check.php to validate input values.
3	Email:true	You must enter an e-mail message in the correct format.
4	Url:true	You must enter a URL in the correct format.
5	Date:true	You must enter a date in the correct format. Date Check IE6 error, use caution.
6	Dateiso:true	You must enter a date in the correct format (ISO), for example: 2009-06-23, 1998/01/22. Verify the format only, not validate the validity.
7	Number:true	You must enter a valid number (negative, decimal).
8	Digits:true	You must enter an integer.
9	CreditCard	You must enter a valid credit card number.
10	Equalto: "#field"	Input values must be the same as #field.
11	Accept	Enter a string with the legal suffix name (the suffix of the uploaded file).
12	Maxlength:5	Enter a string with a maximum length of 5 (Chinese characters are counted as one character).
13	Minlength:10	Enter a string with a minimum length of 10 (Chinese characters are counted as one character).
14	RANGELENGTH:[5,10]	Enter a string that must be between 5 and 10 (Chinese characters are counted as one character).
15	RANGE:[5,10]	The input value must be between 5 and 10.
16	Max:5	The input value cannot be greater than 5.
17	Min:10	The input value cannot be less than 10.

This is not an analysis of each validation element.

Let's analyze an interesting calibration element.

(1) Equalto

For Equalto elements, use the method Equalto: "#filed"

When used specifically, only the value in the current form element is equal to the value of the form element named filed, returning True does not cause an error, or it will give an incorrect message, and the common application is to verify two input passwords in the registration interface, such as:

<p>
<label for= "password" > password </label>
 <input type= "password" name= "password"/>
</p>
<p class= "Tip" ></p>
<p>
 <label for= "Confirm-password" > re-input </label>
 <input type= "password" name= "Confirm-password"/>
</p>

For this form, there are the following validation rules:

rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
Minlength:6
},
"Confirm-password": {
required:true,
equalto: "#password"
}
},

The error message is displayed only if the Name=confirm-password form element is equal to the Name=password form element value.

(2) Email verification elements, used to verify the format of the mailbox

If we add email:true to the form validation information in the example above, it automatically verifies that the output matches the mailbox format, returns False if it does not match, and displays the error message;

Other methods of 4.validate

(1) Replacing the default Submit method with other methods

Submithandler:function (form) {
 form.submit ();
}
Submithandler:function (form) {
 form.ajaxsubmit ();
}

And you can change the default submit method for the Validate () object:

$.validate.setdefaults ({
 submithander:function (form) {
 form.submit ();
 }
})

(2) Debug: Only verify not submitting the form

If debug:true, the form verification is not committed,

You can also change the default Submit method for a validate () object

$.validate.setdefaults ({
 debug:true;
})

(3) Change the location where the error message is displayed

Errorplacement:function (error,element) {
 //The first argument is the error message, and the second parameter is the element error.appendto in HTML
 (Element.parent ( )
 //This can also be written directly in the form of a class name or in the form of an ID name
 //error.appendto (". Class") or Error.appendto ("#id");
}

Errorclass	String	Specifies the CSS class name for the error hint, and you can customize the style of the error hint.	"Error"
Errorelement	String	Labeling errors with what tags, the default is label, can be changed to EM.	"Label"
Errorcontainer	Selector	Display or hide validation information, you can automatically implement the error message occurs when the container properties into a display, no error hidden, not very useful. Errorcontainer: "#messageBox1, #messageBox2"
Errorlabelcontainer	Selector	Put the error message together in a container.
Wrapper	String	Use what label to wrap the top errorelement up again.

For more information on jquery-related content readers can view the site topics: "jquery common Plug-ins and Usage summary", "JQuery Extended Skills Summary", "jquery switching effects and Skills summary", "jquery traversal algorithm and Skills summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.