jQuery Validate添加自定義校驗

jQuery Validate插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程序各種需求。菜鳥教程裏面介紹了一種添加自定義的方法，我再介紹另外的一種。

先下載jQuery Validate 的插件

菜鳥教程提供的 1.14.0 版本下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

導入js庫

第一種：菜鳥教程給的參考方案是：

addMethod(name,method,message) 添加一個新的驗證方法。必須包括一個獨一無二的名字，一個 JAVASCRIPT 的方法和一個默認的信息。

// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)"));

// 郵政編碼驗證   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");

第二種：

//比較時間
jQuery.validator.methods.compareDate = function(value, element, param) {
    var startDate = jQuery(param).val();
    var date1 = new Date(Date.parse(startDate.replace("-", "/")));
    var date2 = new Date(Date.parse(value.replace("-", "/")));
    return date1 <= date2;
};

第二個例子的作用是比較時間，value是當前元素的值，element是當前元素，param是傳入的參數。

這種方式不需要些默認信息。

這兩種使用的方法一樣的，例如：

                 //添加框表單校驗
                 $("#addForm").validate({
                     rules: {
                         startdate: {
                             required: true
                         },
                         enddate: {
                             required: true,
                             compareDate:"#startdate_add"
                         }
                     },
                     messages: {
                        startdate: {
                             required: "該項必填"                         },

                         enddate: {
                             required: "該項必填",
                             compareDate:"需要比開始時間大"
                         }
                     }
                 });