Detailed explanation of jQuery validate plug-in

1. Validate plug-in description

Validate is a lightweight validation plug-in based on jQuery. It has rich built-in validation rules and a flexible custom rule interface. It can connect HTML, CSS and JS Low coupling allows you to freely layout and enrich styles, and supports validation of input, select, and textarea.

2. Configuration method

You need to import the Jquery library first, and then import the Validate plug-in. And the two plug-ins have a certain order. (jquery library-Validate plug-in)

<script type="text/javascript" src="js/jquery-1.9.1.js?1.1.10" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js?1.1.10" ></script>

js code is as follows:

<script type="text/javascript">
$(function(){
$(&#39;#demoForm&#39;).validate({
rules:{
//指的是input 的 name的名字
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:&#39;此项必填&#39;,
minlength:&#39;用户名最小是6位&#39;,
maxlength:&#39;用户名最大是9位&#39;
},
password:{
required:&#39;此项必填&#39;,
minlength:&#39;密码最小是6位&#39;,
maxlength:&#39;密码最大是9位&#39;
},
age:{
min:&#39;最小18岁&#39;,
max:&#39;最大80岁&#39;,
//range:&#39;年龄必须是18-80之间&#39;,
//                          rangelength:&#39;2-3位数&#39;,
digits:&#39;年龄必须是正整数&#39;
},
date:{
required:&#39;必填&#39;,
dateISO:&#39;日期格式不合法&#39;
}
}
})
})
</script>

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="提交" id="btn"/>
</p>
</form>

Explain the code:

$ ('#demoForm').validate({}) form element to call validate

rules: Returns the validation rules of the element. The default error message is in English

messages , you can customize the rules. If a control does not have a message, the default message will be called

Default verification rules:

1	required:true	Required fields.
2	remote:"check.php"	Use the ajax method to call check.php to verify the input value.
3	email:true	A correctly formatted email must be entered.
4	url:true	You must enter the URL in the correct format.
5	date:true	The date must be entered in the correct format. Date verification ie6 error, use with caution.
6	dateISO:true	The date (ISO) in the correct format must be entered, for example: 2009-06-23, 1998/01/ twenty two. Only the format is verified, not the validity.
7	number:true	Must enter a legal number (negative number, decimal).
8	digits:true	Must enter an integer.
9	creditcard:	Must enter a legal credit card number.
10	equalTo:"#field"	The input value must be the same as #field.
11	accept:	Enter a string with a legal suffix (the suffix of the uploaded file).
12	maxlength:5	Enter a string with a maximum length of 5 (Chinese characters count as one character).
13	minlength:10	Enter a string with a minimum length of 10 (Chinese characters count as one character).
14	rangelength:[5,10]	The input length must be between 5 and 10 (Chinese characters count 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.

The above is the detailed content of Detailed explanation of jQuery validate plug-in. For more information, please follow other related articles on the PHP Chinese website!