jQuery 验证（日期范围）

Question

我正在使用 jQuery 验证插件，想知道是否有一种方法可以验证输入字段的日期是否是像 yyyy-mm-dd 这样的日期，并且日期在 2010 年 11 月 29 日至 2010 年 12 月 15 日之间

我对 jQuery 还很陌生因此，如果有答案，请尽可能简化答案，以便我能够完成它。非常感谢任何/所有建议

Answer 1

如果您想要一个可重用的函数，您可以扩展 Emily 和 lonesomeday 的答案以允许提供参数：

$.validator.addMethod('daterange', function(value, element, arg) {
     // Same as above

     var startDate = Date.parse(arg[0]),
         endDate = Date.parse(arg[1]),
         enteredDate = Date.parse(value);       
     // Same as below

 }, $.validator.format("Please specify a date between {0} and {1}."))

请参阅 jQuery 验证的源 range 方法为例。

Answer 2

我从未使用过验证插件，但浏览 API 表明类似的操作可能有效：

$.validator.addMethod('daterange', function(value, element) {
    if (this.optional(element)) {
        return true;
    }

    var startDate = Date.parse('2010-11-29'),
        endDate = Date.parse('2010-12-15'),
        enteredDate = Date.parse(value);

    if (isNan(enteredDate)) {
        return false;
    }

    return ((startDate <= enteredDate) && (enteredDate <= endDate));
});

我认为，然后您需要将 daterange 类添加到适当的元素。

Answer 3

lonesomeday的答案非常接近，但有一些调整。我将按如下方式结束代码：

    if(isNaN(enteredDate)) return false;

    return ((startDate <= enteredDate) && (enteredDate <= endDate));
}, "Please specify a date between 2010-11-29 and 2010-12-15");

这修复了 isNaN 函数，并且还向您的用户提供错误消息，以便他们知道您在寻找什么。

Answer 4

放好马，伙计们！ :)

不要忘记，Date.parse 无法在不同的语言环境下正常工作，它只能正确解析特定的日期格式。

如果您使用各种日期格式（特定于文化） - 最好坚持使用 jquery datepicker 日期处理。

因此，假设您已加载正确的特定于区域性的 jquery datepicker 对象（例如，jquery.ui.datepicker-nb-NO.js，其中日期格式为 DD.MM.yyyy 并且不由 Date.parse 解析）并初始化它，正确的方法是：

$.validator.addMethod('dateRange', function (value, element, parameterValue) {
        if (this.optional(element) && !value) {
            return true;
        }
        var dateFormat = $(element).datepicker('option', 'dateFormat');
        try {
            var startDate = $.datepicker.parseDate(dateFormat, parameterValue[0]).getTime();
            var endDate = $.datepicker.parseDate(dateFormat, parameterValue[1]).getTime();
            var enteredDate = $.datepicker.parseDate(dateFormat, value).getTime();
            return (startDate <= enteredDate) && (enteredDate <= endDate);
        } catch (error) {
            return true;
        }
    });

我将 parseDate 内容放入 try 块中，因为没有正常的方法来确定日期是否已正确解析。

Answer 5

对康纳的代码做了一些小修正。

生成的工作代码是：

$.validator.addMethod('daterange', function(value, element, arg) {
    if (this.optional(element) && !value) {
        return true;
    }

    var startDate = Date.parse(arg[0]),
        endDate = Date.parse(arg[1]),
        enteredDate = Date.parse(value);

    if (isNaN(enteredDate)) {
        return false;
    }

    return ( (isNaN(startDate) || (startDate <= enteredDate)) &&
             (isNaN(endDate) || (enteredDate <= endDate)));


   }, $.validator.format("Please specify a date between {0} and {1}."));

然后像这样使用它：

$("#some_date_input").rules("add",{daterange:['01/31/2001','01/31/2020']});

Answer 6

date 类型 input 上的日期范围 min/max 属性

<!--jquery validate-->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<input id="christmas-shopper-reservation" type="date" min="2010-11-29" max="2010-12-15">

<label id="christmas-shopper-reservation-error" class="error" style="display:none;" for="christmas-shopper-reservation"></label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!--jquery validate-->
    	<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.2.3/jquery.validate.min.js"></script>
    	<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.2.3/additional-methods.min.js"></script>

    <input id="christmas-shopper-reservation" type="date" min="2010-11-29" max="2010-12-15">
    
    <label id="christmas-shopper-reservation-error" class="error" style="display:none;" for="christmas-shopper-reservation"></label>