jQuery Validate 詳細使用說明

轉貼自：http://inspire.twgg.org/programming/jquery/item/134-jquery-validate-detailed-instructions.html


最近愛上了jquery，

所以很多的頁面都拿它來使用，

由於它有很多的plus，今天就先來介紹最常用到的jquery.validate.js，

官方的網址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

引用的網址：http://wangwangliujun.spaces.live.com/blog/

說明如下：

官網的例子裡引用了幾個js和css文件，但只需引用jquery.validate.js這一個文件即可.
貼個簡單的例子：

$('#EditView').validate({
                event: "keyup",
                rules:{
                    name:{required:true},
                    cosa_commodity_group_list:{required:true}
                },
                submitHandler:function(){
                    $("#group_list > option").attr("selected","selected");
                    $(this).submit();
                }
});

1.event是觸發校驗的方式，可選值有keyup(每次按鍵時)，blur(當控件失去焦點時)，不使用這個參數時就只在按提交按鈕時觸發
2.如果在提交前還需要進行一些自定義處理使用submitHandler參數，其它的都比較簡單，自己看看API就成了.
3.debug，如果這個參數為true，那麼表單不會提交，只進行檢查，調試時十分方便.
4.rules，所有的檢驗規則都寫在這個參數里面.
校驗規則參數
格式為：  name : {rule1,rule2,...}     經過測試，用input標籤的id是沒有效果的，必須使用input標籤的name
             (1) required: true            必輸
             (2) number: true            只能輸入數字(包括小數)
             (3) digits:true                只能輸入整數
             (4) minValue: 3              不能小於3
             (5) maxValue: 100          最大不超過100
             (6) rangeValue:[50,100]  值範圍為50-100
             (7) minLength: 5            最小長度(漢字算一個字符)
             (8) maxLength:   10       最大長度(漢字算一個字符)
             (9) rangeLength:[5,10]   長度範圍為5至10位(漢字算一個字符)
             (10) 上面的minLength, maxLength, rangeLength 這三項除了text input之外還可以用於checkbox,select這兩種控件
             (11) email:true               電子郵件
             (12) equalTo: "#field"      與#field值相同
             (13) dateISO:true          日期型，格式為1998/01/22            1999-12-12

required: true| false |（表達式）|（函數）           還可以是表達式和函數，函數返回true表示required有效，false表示required無效 ，返回【""】空對像表示true,返回【"  "】和【"wangwang"】等非空的對象為false

5.messages，自定義錯誤信息，格式與rules類似，需要注意的是如果使用此項，那麼所有的校驗項都必需自定義出錯信息，如果只想定義其中的某一些，那麼就把其它的出錯信息定義為空（即""），系統即會使用默認值。

messages {
             password: {
                 required: "請輸入您的密碼."
                 minLength: "密碼不能小於５位.",
                 maxLength: "密碼不能長於32位."
             },

如何自定義校驗規則：
可以通過自定義檢驗函數的方式新增加校驗規則，步驟如下：
1. 在定義校驗規則之前定義一個新的方法
2. 在rules中指定這個某個域使用此校驗規則
3. 在messages中指定這個域使用此校驗規則沒有通過的提示信息

//這裡定義了一個名為equal的規則
//value是指當前校驗域的值
//element是指當前檢驗的域
//param是指在rules中設定的參數
//這三個參數會在進行校驗時由系統自動帶入
$.validator.methods.equal = function(value, element, param){
    //在這裡使用上面的三個參數進行校驗
    if(value == param)
        return true;//如果當前域的值等於指定的參數就通過校驗
};

$('#form1').validate({
        rules:{
            field1:{equal:20}//在這裡指定field1的檢驗規則是equal，並且參數是20
        },
        messages:{
            field1:{equal:'您的計算有誤！'}//在這裡定義field1的equal規則校驗出錯後的提示信息
        }
});

將校驗規則寫到控件中
有時候我們的控件是動態生成的，這個時候就不可能提前先寫好校驗規則，需要在生成控件的同時寫校驗規則.
這樣寫校驗規則有兩種寫法，一是將規則寫到class屬性中，二是將規則寫到單獨的validate屬性中，其中：
寫到class屬性的寫法如下，例子中在規則前添加了名為some, other, styles 的三個class：

<script src="/../js/jquery.js" type="text/javascript"></script>
<script src="/../js/jquery.validate.js" type="text/javascript"></script>
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" class="{required:true}"></textarea>

第二種寫法如下，使用自定義的validata屬性，但必需加載jquery.metadata.js這個文件

<script src="/../js/jquery.js" type="text/javascript"></script>
<script src="/../js/jquery.metadata.js" type="text/javascript"></script>
<script src="/../js/jquery.validate.js" type="text/javascript"></script>

<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLe