jQuery validate插件初探

jQuery的validate插件，在jQuery驗證時使用非常友善。

具體使用步驟：

1.引入檔案

<script src="/js/class/jquery-1.3.2.min.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.validate.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.metadata.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.validate.messages_cn.js" type="text/javascript" ></script>      

既然是jQuery插件，必須要有jQuery作為支援jquery-1.3.2.min.js

然後是驗證的核心檔案jquery.validate.js

然後是快捷使用檔案，使得可以直接在表單中寫驗證條件jquery.metadata.js

然後是中文提示支援其中的内容很簡單

/*
 * Translated default messages for the jQuery validation plugin.
 * Language: CN
 * Author: Fayland Lam <fayland at gmail dot com>
 */
jQuery.extend(jQuery.validator.messages, {
        required: "<font color='#E15B50'>必選字段</font>",
        remote: "<font color='#E15B50'>請修正該字段</font>",
        email: "<font color='#E15B50'>請輸入正确格式的電子郵件</font>",
        url: "<font color='#E15B50'>請輸入合法的網址</font>",
        date: "<font color='#E15B50'>請輸入合法的日期</font>",
        dateISO: "<font color='#E15B50'>請輸入合法的日期 (ISO).</font>",
        number: "<font color='#E15B50'>請輸入合法的數字</font>",
        digits: "<font color='#E15B50'>隻能輸入整數</font>",
        creditcard: "<font color='#E15B50'>請輸入合法的信用卡号</font>",
        equalTo: "<font color='#E15B50'>請再次輸入相同的值</font>",
        accept: "<font color='#E15B50'>請輸入擁有合法字尾名的字元串</font>",
        maxlength: jQuery.format("<font color='#E15B50'>請輸入一個長度最多是 {0} 的字元串</font>"),
        minlength: jQuery.format("<font color='#E15B50'>請輸入一個長度最少是 {0} 的字元串</font>"),
        rangelength: jQuery.format("<font color='#E15B50'>請輸入一個長度介于 {0} 和 {1} 之間的字元串</font>"),
        range: jQuery.format("<font color='#E15B50'>請輸入一個介于 {0} 和 {1} 之間的值</font>"),
        max: jQuery.format("<font color='#E15B50'>請輸入一個最大為 {0} 的值</font>"),
        min: jQuery.format("<font color='#E15B50'>請輸入一個最小為 {0} 的值</font>")
});      

就這麼些語句，可以根據自己的需要進行修改。

2.設定作用對象

$("#form1").validate({   
                submitHandler:function(form){
                    form.submit();
                }
            });      

上面的代碼告訴插件要對id為form1的表單進行驗證

其中

submitHandler:function(form){
                    form.submit();
                }      

是表示人為的設定送出表單。當驗證成功的時候會送出表單。

如果沒有這段代碼，其實也一樣，驗證成功後會送出表單。

而驗證什麼時候被激活呢？就是#form1表單有送出動作的時候被激活。

是以下面的代碼也很有必要：

//送出
            $(".make_sure").click(function(){
                $("#form1").submit();
            });      

當點選按鈕時，執行送出動作！由于有驗證插件的存在，是以送出必須要走一下驗證的流程，隻有通過了驗證，才能真正的送出表單。

3.設定驗證規則

由于有了jquery.metadata.js的幫助，驗證規則設定變得非常的便捷。

在相應的表單元素中設定class屬性即可。

class="required number"      

等等。

具體的驗證規則有很多，如下：

(1)required:true                必輸字段
(2)remote:"check.php"      使用ajax方法調用check.php驗證輸入值
(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:                   必須輸入合法的信用卡号
(10)equalTo:"#field"          輸入值必須和#field相同
(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      

設定好驗證規則之後，插件就會幫助你進行相應的驗證了。

截圖如下：