學習總結：jQuery插件——Validation Plugin

本週的任務計劃是學習並使用一款jQuery插件，所以在慕課網上找到了這個關於客戶端表單驗證的插件。

插件簡介：Validation插件是最常用的插件之一，客戶端表單驗證是現代網站經常採用的方式，可以減少服務器的壓力，縮短用戶等待時間和提升用戶體驗。jQuery Validation插件提供了很多的配置項目，還附帶了很多驗證方法及多語言提示。

附上插件鏈接：http://jqueryvalidation.org/
額，演示源碼可以去慕課網上下載http://www.imooc.com/learn/385

調用jQuery插件方法：<script> src="插件路徑"></script>（一般在HTML代碼中的最後部分加入）

兩個重要概念：
method：驗證方法，指的是校驗的邏輯。
rule：驗證規則，指的是元素和驗證方法的關聯。

Validation Plugin基本API：
validate()爲核心方法，定義了基本的校驗規則和一些有用的配置項。
以下爲基本驗證方法
1.require 必填；remote 遠程校驗
2.minlength/maxlength 最小/最大長度；rangelength 長度範圍
3.min 最小值； max 最大值； range 值範圍
4.email Email格式；urlURL格式；date 日期；dateISO 國際標準日期
5.number 數字；digits 整數；equalTo 與另一個元素之相等

下面是設置校驗規則的部分代碼，其中設置了必填、輸入格式、輸入值的範圍、最小長度、最大長度和遠程校驗等屬性，如需實現其他屬性的校驗可以下載源碼進行試驗。

$("#demoform").validate({
debug:true,
rules:{
   username:{
   required:true,
   email:true,
   minlength:2,
   maxlength:10,/*可以將最小最大長度屬性改爲rangelength:[2,10]*/
   remote:"remote.jsp"//在調試界面控制檯顯示
   }，
   password:{
   required:true,
   min:1，
   max:9，
   minlength:2,
   maxlength:16,
   }
}
...

Validation Plugin高級API：
1.valid()方法檢查表單是否有效
例：點擊按鈕在控制檯顯示輸入是否正確

$("#check").click(
     function(){
     console.log($"#demoForm").valid()?"填寫正確":"填寫不正確");
     });
     /*check爲元素，demoForm爲表單元素*/

2.rules() 獲取表單元素的校驗規則（也可以添加或刪除表單元素的校驗規則）
例：

$("#username").rules("add",{minlength:2,maxlength:10})
/*給名爲username這個表單元素添加最小最大長度的校驗規則*/
$("#username").rules("remove","minlength maxlength")
/*移除最大最小長度的校驗規則*/

3.Validator對象
Validator有很多有用的方法：
Validator.form()檢查表單是否有效，返回true或false
Validator.element(element)驗證某個元素是否有效，返回true或false
Validator.resetForm()吧表單恢復到驗證前原來的狀態
Validator.showErrors(errors)針對某個元素顯示特定的錯誤信息
Validator.numberOfInvalids()返回無效的元素數量

上述方法可以在控制檯直接調用進行驗證，所以就不給出詳細代碼，需要注意的是，調用前需要捕獲validator對象。

var validtor = $("#demoForm").validate({
...

Validator靜態方法（可以直接使用）:
jQuery.validator.addMethod(name,method [,message]
增加自定義的驗證方法
其中
name:方法名稱；
method:function（value，element，params）方法邏輯；
message：提示消息；
additional-methods.js 包含了很多擴展驗證方法

jQuery.validator.format(template,argument,argumentN…)
格式化字符串，用參數代替模板中的{n}

jQuery.validator.setDefaults(options) 修改插件默認設置

jQuery.validator.addClassRules（name，rules）
爲某些包含名爲name的class增加組合驗證類型

validate()方法配置項
submitHandler 通過驗證後運行的函數，可以加上表單提交的方法
invalidHandler 無效表單提交後運行的函數
ignore 對某些元素不進行驗證
rules 定義校驗規則
messages 定義提示信息
groups 對一組元素的驗證，用一個錯誤提示，用errorPlacement控制吧出錯信息放在哪裏

這裏部分介紹配置項的代碼及效果

...
messages:{
       username:{
       required:'請輸入用戶名',
       minlength:'用戶名不能小於兩個字符',
       maxlength:'用戶名不能超過10個字符',
       remote:'用戶名不存在'
                    },
        password:{
        required:'請輸入密碼',
        minlength:'密碼不能小於兩個字符',
        maxlength:'密碼不能超十六個字符'
                    },
...

效果顯示如圖

最後是幾條客戶端校驗安全性

在數據被輸入程序前必須對數據合法性的檢驗。非法輸入問題是最常見得Web應用程序安全漏洞
所有提交的表單數據，都必須驗證兩次，即就提交前在客戶端驗證，提交後子服務器端再次驗證，保證數據的合法性
服務器端不要相信任何的客戶端數據

最後的最後做一下自我的總結吧，因爲是慕課網上學習的，所以說學的比較淺（但是有些東西還是沒有好好理解），老師教的實例也很簡單，所以說學完後並沒又能夠自己在下面練練手，在學習過程中也聽到了一些以前沒有聽過的專業術語（前面沒學紮實。。。）像正則表達式之類的還需要自己繼續去了解，也有一部分的時間關係吧，把網上課程過一遍花了三個多小時，寫博客時又簡單的回顧了一遍，感覺收穫的沒投入的多。效率要提高，嗯，就這樣吧。