使用jQuery驗證插件的自定義日期格式

Question

我如何指定一個自定義日期合成文件來驗證jQuery的Validation Plugin？

Answer 1

您可以使用addMethod函數創建自己的自定義驗證方法。假設你想驗證「DD/MM/YYYY」：

$.validator.addMethod(
    "australianDate", 
    function(value, element) { 
     // put your own logic here, this is just a (crappy) example 
     return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
    }, 
    "Please enter a date in the format dd/mm/yyyy." 
); 

，然後在你的表單中添加：

$('#myForm') 
    .validate({ 
     rules : { 
      myDate : { 
       australianDate : true 
      } 
     } 
    }) 
; 

Answer 2

nickf的回答是好，但要注意驗證插件已經包含驗證對於其他幾種日期格式，在additional-methods.js文件中。在你自己寫之前，確保有人還沒有完成它。

Answer 3

退房： jQuery Masked Input Plugin

Answer 4

喬恩，你有一些語法錯誤，見下文，這爲我工作。

<script type="text/javascript"> 
$(document).ready(function() { 

    $.validator.addMethod(
     "australianDate", 
     function (value, element) { 
     // put your own logic here, this is just a (crappy) example 
     return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
     }, 
     "Please enter a date in the format dd/mm/yyyy" 
    ); 

    $('#testForm').validate({ 
    rules: { 
     "myDate": { 
     australianDate: true 
     } 
    } 
    }); 

});    

Answer 5

我個人用的很不錯http://www.datejs.com/庫。

Docco這裏：http://code.google.com/p/datejs/wiki/APIDocumentation

您可以使用下面的方法讓您的澳大利亞格式，將驗證閏日29/02/2012而不是29/02/2011：

jQuery.validator.addMethod("australianDate", function(value, element) { 
    return Date.parseExact(value, "d/M/yyyy"); 
}); 

$("#myForm").validate({ 
    rules : { 
     birth_date : { australianDate : true } 
    } 
}); 

我也使用蒙面輸入插件來規範數據http://digitalbush.com/projects/masked-input-plugin/

$("#birth_date").mask("99/99/9999"); 

Answer 6

下面是最近爲我工作的一個特定的代碼示例：

// Replace the builtin US date validation with UK date validation 
$.validator.addMethod(
    "date", 
    function (value, element) { 
     var bits = value.match(/([0-9]+)/gi), str; 
     if (! bits) 
      return this.optional(element) || false; 
     str = bits[ 1 ] + '/' + bits[ 0 ] + '/' + bits[ 2 ]; 
     return this.optional(element) || !/Invalid|NaN/.test(new Date(str)); 
    }, 
    "Please enter a date in the format dd/mm/yyyy" 
); 

我應該注意到，這實際上取代了內置的日期驗證例程，但我看不出這會導致當前插件出現問題。

$('#my_form input.date').rules('add', { date: true }); 

Answer 7

$.validator.addMethod("mydate", function (value, element) { 

     return this.optional(element) || /^(\d{4})(-|\/)(([0-1]{1})([1-2]{1})|([0]{1})([0-9]{1}))(-|\/)(([0-2]{1})([1-9]{1})|([3]{1})([0-1]{1}))/.test(value); 

    }); 

你可以輸入像yyyy-mm-dd也yyyy/mm/dd

，但無法判斷該月的某個時候大小剛好二月28或：

我然後使用該應用的形式29天。

Answer 8

這是我結合/修改以前的職位，以達到我想要的結果：你的驗證配置後

 // Override built-in date validator 
     $.validator.addMethod(
      "date", 
      function (value, element) { 
       //Return   NB: isRequired is not checked at this stage 
       return (value=="")? true : isDate(value); 
      }, 
      "* invalid" 
     ); 

添加日期驗證。即在調用$（form）.validate（{...}）方法後。

 //Add date validation (if applicable) 
     $('.date', $(frmPanelBtnId)).each(function() { 
      $(this).rules('add', { 
       date: true 
      }); 
     }); 

最後修改英國日期格式

//Validates a date input -- http://jquerybyexample.blogspot.com/2011/12/validate-date- using-jquery.html 
function isDate(txtDate) { 
    var currVal = txtDate; 
    if (currVal == '') 
     return false; 

    //Declare Regex 
    var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; 
    var dtArray = currVal.match(rxDatePattern); // is format OK? 

    if (dtArray == null) 
     return false; 

    //Checks for dd/mm/yyyy format. 
    var dtDay = dtArray[1]; 
    var dtMonth = dtArray[3]; 
    var dtYear = dtArray[5]; 

    if (dtMonth < 1 || dtMonth > 12) 
     return false; 
    else if (dtDay < 1 || dtDay > 31) 
     return false; 
    else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) 
     return false; 
    else if (dtMonth == 2) { 
     var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0)); 
     if (dtDay > 29 || (dtDay == 29 && !isleap)) 
      return false; 
    } 

    return true; 
} 

Answer 9

這裏主要而isDate的Javascript功能是將驗證幾乎任何日期格式，其中包括一個新的驗證方法的例子：

• dd/mm/yy或dd/mm/yyyy
• dd.mm.yy or dd.mm.yyyy
• DD，毫米，YY或DD，毫米，YYYY
• 年月日或年月日
• DD-MM-YY或DD-MM-YYYY

然後，當傳遞的值以PHP的你可以用strtotime

這裏轉換是如何添加方法：

：

$.validator.addMethod("anyDate", 
    function(value, element) { 
     return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2])[/., -](19|20)?\d{2}$/); 
    }, 
    "Please enter a date in the format!" 
); 

然後你添加新的過濾器3210

$('#myForm') 
.validate({ 
    rules : { 
     field: { 
      anyDate: true 
     } 
    } 
}) 

;

Answer 10

很容易，例如：適用於HTML5 automatic type =「date」。

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script> 
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_es.js"></script> 

$(function() { 

     // Overload method default "date" jquery.validate.min.js 
     $.validator.addMethod(
      "date", 
      function(value, element) { 
       var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/; 
       return value.match(dateReg); 
      }, 
      "Invalid date" 
     ); 

    // Form Demo jquery.validate.min.js 
    $('#form-datos').validate({ 
     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 

}); 

Answer 11

@blasteralfred：

我有以下規則驗證正確的日期對我來說（年月日）

jQuery.validator.addMethod(
"validDate", 
function(value, element) { 
    return value.match(/(?:0[1-9]|[12][0-9]|3[01]) (?:0[1-9]|1[0-2]) (?:19|20\d{2})/); 
}, 
"Please enter a valid date in the format DD MM YYYY" 

）;

對於DD/MM/YYYY

jQuery.validator.addMethod(
"validDate", 
function(value, element) { 
    return value.match(/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/); 
}, 
"Please enter a valid date in the format DD/MM/YYYY" 

）;

這不會驗證01 13 2017和01/13/2017。

而且也不驗證50 12 2017和50/12/2017。