首頁 »
2011/03/30

jQuery plugin: Validation的詳細使用

最近愛上了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: "密碼不能小於5位.",
                 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, minLength:2" />


關鍵字: BMI 官網 焦點

介紹一個JQuery的外掛工具「就地編輯」←上一篇 │首頁│ 下一篇→JS比較輸入日期是否大於今日
本文引用網址: