jQuery Validation是一個用於驗證表單的jQuery插件，簡單易用，已經包含了16種內置的驗證規則．Github上也有更多的驗證規則可以使用．這都不是重點，重點是你可以輕鬆的定製自己的規則．
內置規則：
- required – Makes the element required.
- remote – Requests a resource to check the element for validity.
- minlength – Makes the element require a given minimum length.
- maxlength – Makes the element require a given maximum length.
- rangelength – Makes the element require a given value range.
- min – Makes the element require a given minimum.
- max – Makes the element require a given maximum.
- range – Makes the element require a given value range.
- step – Makes the element require a given step.
- email – Makes the element require a valid email
- url – Makes the element require a valid url
- date – Makes the element require a date.
- dateISO – Makes the element require an ISO date.
- number – Makes the element require a decimal number.
- digits – Makes the element require digits only.
- equalTo – Requires the element to be the same as another one
內置規則的使用
內置規則的使用非常簡單：
首先將該插件的js文件包含進html文件：
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.validate.min.js"></script>
然後用jQuery選擇需要驗證的表單，執行validate()函數即可：
<script>
$("#form_id").validate();
</script>
jQuery Validation官網上的例子：
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
</body>
</html>
jQuery Validation會根據表單設置的type和屬性自動爲他們分配內置的規則，比如email,url,required等．
運行一下看看：
什麼都不輸入，直接點提交：
輸入錯誤的Email地址，改正後錯誤提示自動消失：
添加自定義規則
jQuery Validation最吸引人的feature，它可以輕鬆的加入自定義的規則：
第一步，在js中調用jQuery.validator.addMethod函數來添加規則，例如添加IP格式檢查的規則：
$.validator.addMethod( "ipv4", function( value, element ) {return this.optional( element ) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test( value );}, "Invalid IP v4 address." ); //自定義其他規則只需要替換規則名"ipv4",正則表達式//之間的內容,以及出錯後顯示的字符串"Invalid IP v4 address."即可．
第二步，把規則應用到指定的表單項，即在執行$("#form_id").validate()函數的時候加入rules參數：
23 $("#ip_form").validate({
24 rules: {
25 ip: {
26 required: true,
27 ipv4: true,
28 },
29 netmask: {
30 required: true,
31 ipv4: true,
32 },
33 gateway: {
34 required: true,
35 ipv4: true,
36 },
37 },
38 }); //其中ip,netmask,gateway爲表單項的name屬性．required和ipv4是規則名．
生效後的樣子，可以添加如下css來修改錯誤信息的樣式：
label.error {
margin-left: 10px;
padding-left: 5px;
padding-right: 5px;
color: #E2303A;
font-style: italic;
font: Helvetica Neue, 12px, #E2303A;
border: 1px solid #F2A9AE;
}
使用json提交數據
表單驗證通過後，提交動作默認是使用form本身的提交動作，即指定form的action和method屬性：
method="get" action=""
可以在validate()函數中添加submitHandler參數來指定點擊提交後執行的函數，我們可以在該函數中使用$.json來提交數據：
23 $("#ip_form").validate({
24 rules: {
25 ip: {
26 required: true,
27 ipv4: true,
28 },
29 netmask: {
30 required: true,
31 ipv4: true,
32 },
33 gateway: {
34 required: true,
35 ipv4: true,
36 },
37 dns: {
38 dns: true,
39 }
40 },
41 submitHandler: function(form) {
42 ip_ok();
43 $("#ip-conf").modal('hide');
44 }
45 });