Jquery.validata.js Plug-in

First, validate plug-in description

Validate is a lightweight verification plugin based on jquery, with rich validation rules and a flexible custom rule interface, the low-coupling between HTML, CSS and JS allows you to freely layout and enrich styles, supporting Input,select,textarea validation.

Second, the configuration method

You need to import the jquery library first and then import the Validate plugin. And two plugins have a certain sequencing. (jquery library-validate plugin)

<script type= "Text/javascript" src= "Js/jquery-1.9.1.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.validate.min.js" ></script>

The JS code is as follows:

<script type= "Text/javascript" >

$ (function () {
$ (' #demoForm '). Validate ({
rules:{
Refers to the name of input
username:{
Required:true,
Minlength:6,
Maxlength:9
},
password:{
Required:true,
Minlength:6,
Maxlength:9
},
age:{
Min:18,
MAX:80,
RANGE:[18,80],
R Angelength:[2,3],
Digits:true
},
date:{
Required:true,
Dateiso:true,

}
},
messages:{
username:{
Required: ' This entry is required ',
MinLength: ' User name minimum is 6 bit ',
MaxLength: ' User name Max is 9 bit '
},
password:{
Required: ' This entry is required ',
MinLength: ' Minimum password is 6 bit ',
MaxLength: ' Maximum password is 9 bit '
},
age:{
Min: ' Minimum 18 years old ',
Max: ' Max 80 years old ',
Range: ' age must be between 18-80 ',
Rangelength: ' 2-3 digits ',
Digits: ' Age must be a positive integer '
},
date:{
Required: ' Required ',
Dateiso: ' date format is not valid '
}
}
})
})
</script>

The HTML code is as follows:

<form id= "Demoform" >

<p>
<label for= "User" >username</label>
<input type= "text" name= "username" id= "user"/>
</p>
<p>
<label for= "Pass" >password</label>
<input type= "text" name= "password" id= "pass"/>
</p>
<p>
<label for= "Age" >age</label>
<input type= "text" name= "Age" id= "age"/>
</p>
<p>
<label for= "Date" >date</label>
<input type= "text" name= "date" id= "date"/>
</p>
<p>

<input type= "Submit" value= "commit" id= "btn"/>
</p>
</form>

Explain the code:

$ (' #demoForm '). Validate ({}) table cells are always called validate

Rules: Returns the element's validation rule, the default prompt error message is in English

Messages, you can customize the rule, and if a control does not have a message, the default information is called

Default Check rule:

1	Required:true	The field that must be entered.
2	Remote: "check.php"	Use the Ajax method to call check.php to validate the 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 with caution.
6	Dateiso:true	You must enter the correct format for the date (ISO), for example: 2009-06-23, 1998/01/22. Verify the format only and do not validate the validity.
7	Number:true	You must enter a valid number (negative, fractional).
8	Digits:true	You must enter an integer.
9	CreditCard	You must enter a valid credit card number.
10	Equalto: "#field"	The input value must be the same as #field.
11	Accept	Enter a string with a valid suffix name (the suffix of the upload 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.

Jquery.validata.js Plug-in