## validation 插件
Validation 是一个优秀的表单验证插件。
### 1.快速上手
首先引入Validation库。
`<script src="./js/jquery.validate.js" type="text/javascript"></script>`
~~~javascript
<p>
<label for="cusername">姓名</label>
<em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input class="required email" id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input class="url" id="curl" name="url" size="25" value="" />
</p>
$('#commentForm').validate();
~~~
### 2.不同的写法
**第一种写法**
这种写法需要引入一个支持固定格式解析的jQuery插件,Validation将其很好的融合进验证规则编码中。
~~~javascript
<p>
<label for="cusername">姓名</label>
<em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input class="{validate:{url:true}}" id="curl" name="url" size="25" value="" />
</p>
$('#commentForm').validate({meta:"validate"});
~~~
**第二种方法**
不将验证规则写在 class 属性中,而写在javascript代码中。
~~~javascript
$('#commentForm').validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required"
}
});
~~~
### 3.默认校验规则
|验证规则|解释|
|---|---|
|required:true | 必输字段 |
|remote:"check.php" | 使用ajax方法调用check.php验证输入值 |
|email:true| 必须输入正确格式的电子邮件 |
|url:true | 必须输入正确格式的网址 |
|date:true | 必须输入正确格式的日期 |
|dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 |
|number:true | 必须输入合法的数字(负数,小数) |
|digits:true | 必须输入整数 |
|creditcard: | 必须输入合法的信用卡号 |
|equalTo:"#field" | 输入值必须和#field相同 |
|accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)|
|maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
|minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
|rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
|range:[5,10] | 输入值必须介于 5 和 10 之间 |
|max:5 | 输入值不能大于5 |
|min:10 | 输入值不能小于10 |