▓▓▓▓▓▓ 大致介紹 jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法預設使用英語 ...
▓▓▓▓▓▓ 大致介紹
jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法預設使用英語作為錯誤信息，且已翻譯成其他 37 種語言。該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 插件。
下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
▓▓▓▓▓▓ 基本語法
Validate插件需要jQuery,所以我們需要在頭部引入jQuery和Validate文件
1 <script type="text/javascript" src="lib/jquery.js"></script> 2 <script type="text/javascript" src="dist/jquery.validate.min.js"></script>
文件引入完畢，先寫個簡單的表單
1 <form class="cmxform" id="commentForm" method="get"> 2 <fieldset> 3 <legend>驗證完整的表單</legend> 4 <p> 5 <label for="firstname">名字</label> 6 <input id="firstname" name="firstname" type="text"> 7 </p> 8 <p> 9 <label for="lastname">姓氏</label> 10 <input id="lastname" name="lastname" type="text"> 11 </p> 12 <p> 13 <label for="username">用戶名</label> 14 <input id="username" name="username" type="text"> 15 </p> 16 <p> 17 <label for="password">密碼</label> 18 <input id="password" name="password" type="password"> 19 </p> 20 <p> 21 <label for="confirm_password">驗證密碼</label> 22 <input id="confirm_password" name="confirm_password" type="password"> 23 </p> 24 <p> 25 <label for="email">Email</label> 26 <input id="email" name="email" type="email"> 27 </p> 28 <p> 29 <label for="agree">請同意我們的聲明</label> 30 <input type="checkbox" class="checkbox" id="agree" name="agree"> 31 </p> 32 <p> 33 <input class="submit" type="submit" value="提交"> 34 </p> 35 </fieldset> 36 </form>
然後我們開始寫驗證表單的代碼
首先我們需要知道那個表單需要驗證
1 $(function(){ 2 3 $('#commentForm').validate(); 4 5 });
然後開始寫驗證的規則，要註意這裡選擇元素是根據每個標簽的name屬性選擇的，基本語法如下
1 $('#commentForm').validate({ 2 rules: { 3 firstname: 'required',//required 表示是必填欄位 4 lastname: { 5 required: true, 6 minlength: 3 // 最小長度是3 7 } 8 } 9 });
從上面可以看出，如果一個信息只有一個驗證要求可以寫成一行，比如 firstname；如果有多個驗證要寫成像 lastname 這種形式；知道了基本的語法
在看看Validation都提供了那些校驗規則
(1)、required:true 必輸欄位 (2)、remote:"remote-valid.jsp" 使用ajax方法調用remote-valid.jsp驗證輸入值 (3)、email:true 必須輸入正確格式的電子郵件 (4)、url:true 必須輸入正確格式的網址 (5)、date:true 必須輸入正確格式的日期，日期校驗ie6出錯，慎用 (6)、dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 (7)、number:true 必須輸入合法的數字(負數，小數) (8)、digits:true 必須輸入整數 (9)、creditcard:true 必須輸入合法的信用卡號 (10)、equalTo:"#password" 輸入值必須和#password相同 (11)、accept: 輸入擁有合法尾碼名的字元串（上傳文件的尾碼） (12)、maxlength:5 輸入長度最多是5的字元串(漢字算一個字元) (13)、minlength:10 輸入長度最小是10的字元串(漢字算一個字元) (14)、rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字元串")(漢字算一個字元) (15)、range:[5,10] 輸入值必須介於 5 和 10 之間 (16)、max:5 輸入值不能大於5 (17)、min:10 輸入值不能小於10
我們將上面的表單驗證完善一下，如下
1 $(function(){ 2 3 $('#commentForm').validate({ 4 rules: { 5 6 firstname: { 7 required: true, 8 minlength: 5 9 }, 10 11 lastname: "required", 12 13 username: { 14 required: true, 15 rangelength: [4,6] 16 }, 17 18 password: { 19 required: true, 20 minlength: 4, 21 number: true 22 }, 23 24 confirm_password: { 25 required: true, 26 minlength: 3, 27 equalTo: '#password' 28 }, 29 30 email: { 31 required: true, 32 email: true 33 }, 34 35 } 36 }); 37 });
效果：
可以看到，這裡的提示預設是英文的不太滿意，將提示信息更改成中文有兩種方式
第一種方式：引入語言文件（推薦）
1 <script type="text/javascript" src="dist/localization/messages_zh.js"></script>
他的提示信息是：
1 required: "這是必填欄位", 2 remote: "請修正此欄位", 3 email: "請輸入有效的電子郵件地址", 4 url: "請輸入有效的網址", 5 date: "請輸入有效的日期", 6 dateISO: "請輸入有效的日期 (YYYY-MM-DD)", 7 number: "請輸入有效的數字", 8 digits: "只能輸入數字", 9 creditcard: "請輸入有效的信用卡號碼", 10 equalTo: "你的輸入不相同", 11 extension: "請輸入有效的尾碼", 12 maxlength: $.validator.format("最多可以輸入 {0} 個字元"), 13 minlength: $.validator.format("最少要輸入 {0} 個字元"), 14 rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字元串"), 15 range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"), 16 max: $.validator.format("請輸入不大於 {0} 的數值"), 17 min: $.validator.format("請輸入不小於 {0} 的數值")
第二種方式：自己寫提示信息
1 $('#commentForm').validate({ 2 rules: { 3 4 firstname: { 5 required: true, 6 minlength: 5 7 }, 8 9 lastname: "required", 10 11 username: { 12 required: true, 13 rangelength: [4,6] 14 }, 15 16 password: { 17 required: true, 18 minlength: 4, 19 number: true 20 }, 21 22 confirm_password: { 23 required: true, 24 minlength: 3, 25 equalTo: '#password' 26 }, 27 28 email: { 29 required: true, 30 email: true 31 } 32 }, 33 messages: { 34 35 firstname: "請輸入您的名字", 36 lastname: "請輸入您的姓氏", 37 username: { 38 required: "請輸入用戶名", 39 minlength: "用戶名必需由兩個字母組成" 40 }, 41 password: { 42 required: "請輸入密碼", 43 minlength: "密碼長度不能小於 5 個字母" 44 }, 45 confirm_password: { 46 required: "請輸入密碼", 47 minlength: "密碼長度不能小於 5 個字母", 48 equalTo: "兩次密碼輸入不一致" 49 }, 50 email: "請輸入一個正確的郵箱", 51 } 52 });
效果：
註意：還有一種寫驗證的方式是在 class 中寫，例如
<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">
但是不推薦這種寫法，因為不符合樣式與結構分離的要求，並且還需要自己下載一個jquery.metadata.js文件才能夠這樣寫
▓▓▓▓▓▓ 表單提交問題
可以在表單提交之前執行我們自定義的代碼，當我們的自定義代碼執行完畢後再提交表單
1 $('#commentForm').validate({ 2 3 submitHandler: function(){ 4 alert("提交事件成功"); 5 from.submit(); 6 } 7 });
可以設置validate的預設值
1 $.validate.setDefaults({ 2 submitHandler: function(){ 3 alert("提交成功！"); 4 form.submit(); 5 } 6 });
只驗證不提交表單
1 $(function(){ 2 $("#commentForm").validate({ 3 debug:true; 4 }); 5 });
▓▓▓▓▓▓ 錯誤提示信息設置
1、錯誤信息位置設置
errorPlacement方法是設置錯誤信息顯示在哪，預設值是在驗證元素的後面
1 errorPlacement: function(error, element) { 2 error.appendTo(element.parent()); 3 }
errorClass 是設置錯誤信息的樣式，後跟css類名
errorElement 是設置用什麼標簽包住錯誤信息，預設值是<label>
errorLabelContainer 是設置將所有的錯誤信息包在一個地方
wrapper 是設置用什麼標簽再把上邊的 errorELement 包起來
例如：
1 errorPlacement: function(error,element){ 2 $(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error); 3 },
是將錯誤提示信息顯示在驗證的信息前面
效果：
例如：
1 errorElement: 'span', 2 errorClass: 'commentError', 3 errorLabelContainer: $('form div.error'), 4 wrapper: 'li',
是將每個提示信息用<span>標簽包起來，給他們添加css名為 .commentError 的樣式， 並把他們都包再一個class為 error 的div里，在用<li>把每個提示信息包起來
效果：
2、錯誤信息樣式設置
有兩種方式可以修改提示信息的樣式
第一種就是採用下載Validation時自帶的樣式文件
1 <link href="demo/css/screen.css" type="text/css" rel="stylesheet" />
第二種方式就是自己定義樣式（當然也可以修改自帶的css文件）
例如添加這樣的樣式：
1 input.error { border: 1px solid red; } 2 label.error { 3 background:url("demo/images/unchecked.gif") no-repeat 0px 0px; 4 5 padding-left: 16px; 6 7 padding-bottom: 2px; 8 9 font-weight: bold; 10 11 color: #EA5200; 12 } 13 label.checked { 14 background:url("demo/images/checked.gif") no-repeat 0px 0px; 15 }
效果：
▓▓▓▓▓▓ 驗證時的問題
1、驗證的元素通過
驗證的元素通過驗證時如果要進行操作，可以使用 success ，他可以接受字元串或者是函數，當接受的是字元串的時候是添加樣式
例如：
success: function(){ alert(1); },
是在要驗證的元素通過驗證時，彈出1
例如：
success: "valid"
是將css樣式名為 .valid 添加到元素上
2、驗證方式
▓▓▓▓▓▓ 自定義校驗
雖然Validation提供了許多驗證的方式，但是有些情況還是不夠用的，所以如果要添加自定義的校驗方式可以使用 addMethod 方法，通常將自定義的方法寫在 additional-methods.js 中，然後要引入這個文件
<script type="text/javascript" src="dist/additional-methods.js"></script>
寫入 additional-methods.js 文件的內容
例如：
1 $.validator.addMethod("isZipCode", function(value, element) { 2 var tel = /^[0-9]{6}$/; 3 return this.optional(element) || (tel.test(value)); 4 }, "請正確填寫您的郵政編碼");
只要把這段代碼寫入 additional-methods.js 文件就可以使用了
例如：
1 zipcode: { 2 required: true, 3 isZipCode :true 4 }
效果：
▓▓▓▓▓▓ radio 和 checkbox、select 的驗證
radio的required表示必須選中一個
checkbox的required表示必須選中，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間
select的required表示選中的value不能為空，minlength表示必須選中的最小個數，maxlength表示必須選中的最大個數，rangelength[2,3]表示選中個數區間
總結：Validation插件提供了許多的驗證，用戶可以自己添加自己的驗證和提示信息的樣式，但是在博客中我並沒有提及與ajax相關的內容，因為ajax還沒有學習-_-||，如果有什麼問題可以和我探討，如果有不對的地方，歡迎指正
