jQuery插件 -- 表單驗證插件jquery.validate.js

最常使用JavaScript的場合就是表單的驗證，而jQuery作爲一個優秀的JavaScript庫，也提供了一個優秀的表單驗證插件----Validation。Validation是歷史最悠久的jQuery插件之一，經過了全球範圍內不同項目的驗證，並得到了許多Web開發者的好評。作爲一個標準的驗證方法庫，Validation擁有如下特點：

1.內置驗證規則： 擁有必填、數字、Email、URL和信用卡號碼等19類內置驗證規則

2.自定義驗證規則： 可以很方便地自定義驗證規則

3.簡單強大的驗證信息提示： 默認了驗證信息提示，並提供自定義覆蓋默認的提示信息的功能

4.實時驗證： 可能通過keyup或blur事件觸發驗證，而不僅僅在表單提交的時候驗證

validate.js下載地址： http://plugins.jquery.com/project/validate

metadata.js下載地址： http://plugins.jquery.com/project/metadata

使用方法：
1.引入jQuery庫和Validation插件

 <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
 <script src="scripts/jquery.validate.js" type="text/javascript"></script>

2.確定哪個表單需要被驗證

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
    $("#commentForm").validate();
});
//]]>
</script>

3.針對不同的字段，進行驗證規則編碼，設置字段相應的屬性

class="required"   必須填寫
class="required email"        必須填寫且內容符合Email格式驗證
class="url"             符合URL格式驗證
minlength="2"      最小長度爲2

可驗證的規則有19種：

        required:      必選字段
        remote:        "請修正該字段",
        email:         電子郵件驗證
        url:           網址驗證
        date:          日期驗證
        dateISO:       日期 (ISO)驗證
        dateDE:
        number:        數字驗證
        numberDE:
        digits:        只能輸入整數
        creditcard:    信用卡號驗證
        equalTo:       ”請再次輸入相同的值“驗證
        accept:        擁有合法後綴名的字符串驗證
        maxlength/minlength:    最大/最小長度驗證
        rangelength:     字符串長度範圍驗證
        range:           數字範圍驗證
        max/min:         最大值/最小值驗證

另個一種驗證方法（將所有的與驗證相關的信息寫到class屬性中方便管理）

1.引入一個新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

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

2.改變調用的驗證方法

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
    //將$("#commentForm").validate();  改成
    $("#commentForm").validate({meta: "validate"});
});
//]]>
</script>

3.將驗證規則全部編寫到class屬性中

class="{validate:{required: true, minlength: 2, messages:{required:'請輸入姓名', minlength:'請至少輸入兩個字符'}}}"
class="{validate:{required: true, email: true, messages:{required:'請輸入電子郵件', email:'請檢查電子郵件的格式'}}}"     

也可以通過name屬性來關聯字段和驗證規則的驗證寫法（驗證行爲和HTML結構完全脫鉤）

$("#commentForm").validate({
   rules: {
      username: {
         required: true,
         minlength: 2
      },
      email: {
         required: true,
         email: true
      },
      url:"url",
      comment: "required"
   },
   messages: {
      username: {
         required: '請輸入姓名',
         minlength: '請至少輸入兩個字符'
      },
      email: {
         required: '請輸入電子郵件',
         email: '請檢查電子郵件的格式'
      },
      url: '請檢查網址的格式',
      comment: '請輸入您的評論'
   }
});

國際化

Validation插件的驗證信息默認語言是英文，如果要改成中文，只需要引入Validation提供的中文驗證信息即可，引入代碼如下：

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

自定義驗證信息並美化

errorElement: "em",               //可以用其他標籤，記住把樣式也對應修改
success: function(label) {    //label指向上面那個錯誤提示信息標籤em
      label.text("")                       //清空錯誤提示消息
              .addClass("success");    //加上自定義的success類
     }
在CSS中添加樣式與之關聯
em.error {
      background:url("images/unchecked.gif") no-repeat 0px 0px;
      padding-left: 16px;
}
em.success {
      background:url("images/checked.gif") no-repeat 0px 0px;
      padding-left: 16px;
}

自定義驗證規則

//自定義一個驗證方法
$.validator.addMethod(
    "formula", //驗證方法名稱
    function(value, element, param) {//驗證規則
        return value == eval(param);
    }, 
    '請正確輸入數學公式計算後的結果'//驗證提示信息
);

$("#commentForm").validate({
   rules: {
      username: {
         required: true,
         minlength: 2
      },
      email: {
         required: true,
         email: true
      },
      url:"url",
      comment: "required",
      valcode: {
         formula: "7+9"
      }
   },
   messages: {
      username: {
         required: '請輸入姓名',
         minlength: '請至少輸入兩個字符'
      },
      email: {
         required: '請輸入電子郵件',
         email: '請檢查電子郵件的格式'
      },
      url: '請檢查網址的格式',
      comment: '請輸入您的評論',
      valcode: '驗證碼錯誤'
   }
});