## 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 |