使用 JQuery Validate [重复] 以 dd/mm/yyyy 格式验证日期

Posted 2023-02-24

【中文标题】使用 JQuery Validate [重复] 以 dd/mm/yyyy 格式验证日期

【英文标题】：Validate date in dd/mm/yyyy format using JQuery Validate [duplicate]

【发布时间】：2014-08-14 08:12:43

【问题描述】：

我正在输入出生日期和死亡日期。需要验证

死亡日期应早于出生日期 日期格式为 dd/mm/yyyy 日期小于或等于今天。

验证没有按预期工作，无法找出问题所在。请帮忙。

Fiddle code

使用的JS库

日历/日期选择器的 JQuery UI JQuery 验证表单验证

验证库的其他方法

var today = new Date();
var authorValidator = $("#itemAuthorForm").validate(
rules : 
    dateOfBirth : 
        required : false,
        date : true,
        dateITA : true,
        dateLessThan : '#expiredDate'
    ,
    expiredDate : 
        required : false,
        date : true,
        dateITA : true,
        dateGreaterThan : "#dateOfBirth"
    
,
onfocusout : function(element) 
    if ($(element).val()) 
        $(element).valid();
    

);
var dateOptionsDOE = 
maxDate : today,
dateFormat : "dd/mm/yy",
changeMonth : true,
changeYear : true,
onClose : function(selectedDate) 
    $("#dateOfBirth").datepicker("option", "maxDate", selectedDate);

;
var dateOptionsDOB = 
maxDate : today,
dateFormat : "dd/mm/yy",
changeMonth : true,
changeYear : true,
onClose : function(selectedDate) 
    $("#expiredDate").datepicker("option", "minDate", selectedDate);

 ;

jQuery.validator.addMethod("dateGreaterThan",
function(value, element, params) 
if ($(params).val() === "")
    return true;

if (!/Invalid|NaN/.test(new Date(value))) 
    return new Date(value) > new Date($(params).val());

return isNaN(value) && isNaN($(params).val())
        || (Number(value) > Number($(params).val()));
        , 'Must be greater than 0.');
        jQuery.validator.addMethod("dateLessThan",
        function(value, element, params) 
if ($(params).val() === "")
    return true;

if (!/Invalid|NaN/.test(new Date(value))) 
    return new Date(value) < new Date($(params).val());


return isNaN(value) && isNaN($(params).val())
        || (Number(value) < Number($(params).val()));
        , 'Must be less than 0.');
        $("#expiredDate").datepicker(
    $.extend(, $.datepicker.regional['en-GB'], dateOptionsDOE));
        $("#dateOfBirth").datepicker(
    $.extend(, $.datepicker.regional['en-GB'], dateOptionsDOB));

【问题讨论】：

当你写的时候：dateFormat : "dd/mm/yy" 是否还包括"dd.mm.yy" 和"dd-mm-yy" ??

我使用了简化正则表达式：jQuery.validator.addMethod("checkDateOfBirth", function(value) return value.match(/^(0[1-9]|1[012])[ - /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$/); , "无效日期" );月（1-12）日（1-31）年（19xx - 20xx）

【参考方案1】：

这也将检查闰年。这是纯正则表达式，因此它比任何 lib 都快（也比 moment.js 快）。但是如果你要在你的代码中使用很多日期，我建议你使用 moment.js

var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d)0,2(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d)1,2)?$/;

console.log(dateRegex.test('21/01/1986'));

http://regexper.com/....

【讨论】：

感谢这张图和正则表达式！是生成的吗？如果是，您能告诉我们工具的名称是什么吗？

这里：regexper.com

mm/dd/yyyy 格式有吗？

@LeoCavalcante，这太棒了！像魅力一样工作！非常感谢！

令人印象深刻！这甚至可以应对 100 年和 400 年的闰年变化。

【参考方案2】：

您不需要date 验证器。它doesn't support dd/mm/yyyy format，这就是为什么您会收到“请输入有效日期”消息，如 2014 年 1 月 1 日这样的输入。您已经拥有 dateITA 验证器，它根据需要使用 dd/mm/yyyy 格式。

就像date 验证器一样，您的dateGreaterThan 和dateLessThan 代码调用new Date 以获取输入字符串，并且在解析日期时具有相同的问题。您可以使用这样的函数来解析日期：

function parseDMY(value) 
    var date = value.split("/");
    var d = parseInt(date[0], 10),
        m = parseInt(date[1], 10),
        y = parseInt(date[2], 10);
    return new Date(y, m - 1, d);

【讨论】：

感谢您花时间阅读我的代码。在采纳您的建议后，代码似乎可以正常工作。答对了！ :)... 我的大部分时间都花在为验证器寻找其他方法以及为 UI 小部件寻找 en-GB 格式上。我应该删除 date:true 规则 :)

即使我输入了无效的日期，它也总是返回一个日期。

如果要解析小时和分钟怎么办？

这个函数不是用来验证日期的。 OP 已经在使用 dateITA 验证器，此功能仅有助于实现额外的 dateGreaterThan 和 dateLessThan 验证器。

【参考方案3】：

如果你使用 moment js 库，它可以很容易地做到这一点 -

jQuery.validator.addMethod("validDate", function(value, element) 
        return this.optional(element) || moment(value,"DD/MM/YYYY").isValid();
    , "Please enter a valid date in the format DD/MM/YYYY");

【讨论】：

当您在 ''DD/MM/YYYY" 中验证日期时是否还包括 dateFormat : "dd-mm-yy" 和 dd.mm.yy ???

如果你添加 OR，就会成功：return this.optional(element) ||时刻（值，“DD/MM/YYYY”）.isValid（）|| moment(value,"DD-MM-YYYY").isValid();

这将失败： moment(1,"DD/MM/YYYY").isValid();时刻将返回 true 。

【参考方案4】：

我在我的项目中遇到了类似的问题。经过一番苦苦挣扎，我找到了这个解决方案：

if ($.datepicker.parseDate("dd/mm/yy","17/06/2015") > $.datepicker.parseDate("dd/mm/yy","20/06/2015"))
    // do something

你不需要像 jQuery Validate 或 Moment.js 这样的插件来解决这个问题。希望这个解决方案有所帮助。

【讨论】：

最简单实用的解决方案。谢谢。

但是你需要 JQuery UI。

就像你说的——你不需要插件。这很有效。如果输入为假，则抛出异常。非常感谢:)

【参考方案5】：

这会验证 dd/mm/yyy 日期。 编辑您的 jquery.validate.js 并添加这些。

参考（正则表达式）：Regex to validate date format dd/mm/yyyy

dateBR: function( value, element ) 
    return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d2)$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d2)$/.test(value);


messages: 
    dateBR: "Invalid date."


classRuleSettings: 
    dateBR: dateBR: true

用法：

$( "#myForm" ).validate(
    rules: 
        field: 
            dateBR: true
        
    
);

【讨论】：

不应直接编辑 jQuery 验证核心文件。很危险

【参考方案6】：

这对我来说很好。

$(document).ready(function () 
       $('#btn_move').click( function()
           var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d4$/;
           var Val_date=$('#txt_date').val();
               if(Val_date.match(dateformat))
              var seperator1 = Val_date.split('/');
              var seperator2 = Val_date.split('-');

              if (seperator1.length>1)
              
                  var splitdate = Val_date.split('/');
              
              else if (seperator2.length>1)
              
                  var splitdate = Val_date.split('-');
              
              var dd = parseInt(splitdate[0]);
              var mm  = parseInt(splitdate[1]);
              var yy = parseInt(splitdate[2]);
              var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
              if (mm==1 || mm>2)
              
                  if (dd>ListofDays[mm-1])
                  
                      alert('Invalid date format!');
                      return false;
                  
              
              if (mm==2)
              
                  var lyear = false;
                  if ( (!(yy % 4) && yy % 100) || !(yy % 400))
                  
                      lyear = true;
                  
                  if ((lyear==false) && (dd>=29))
                  
                      alert('Invalid date format!');
                      return false;
                  
                  if ((lyear==true) && (dd>29))
                  
                      alert('Invalid date format!');
                      return false;
                  
              
          
          else
          
              alert("Invalid date format!");

              return false;
          
       );
   );

【讨论】：

参考：forum.jquery.com/topic/…