jQuery .validate - 在 Internet Explorer 中验证日期答案

【问题标题】：jQuery .validate - validating dates in Internet ExplorerjQuery .validate - 在 Internet Explorer 中验证日期
【发布时间】：2017-08-30 23:47:51
【问题描述】：

我了解到 IE 在使用 jQuery Validate Plugin (https://jqueryvalidation.org/) 验证日期方面存在一些问题。

我的规则是 starttime: {required: true, date: true}，但我的格式是 DD-MMM-YYYY hh:mm a，即 2017 年 8 月 31 日上午 9:43。

这适用于其他浏览器，但 IE 说这是一个无效的日期。请注意，验证正在处理其他字段。

这里有一些很好的答案：Custom date format with jQuery validation plugin 但具体来说，我如何在 IE 中验证我的日期格式？

我的猜测是我需要添加一个自定义方法，但它应该是什么？正则表达式或自定义日期，以及如何？我可以使用 RegEx 验证日期格式而不验证日期本身（例如 32/01/2017），因为此页面使用日期选择器并且用户无法直接输入数据。

编辑（包括实际代码）：

<script type="text/javascript" src="js/plugins/jquery-validate/jquery.validate.min.js"></script>

<script>
    $(document).ready(function(){

        if ($("#newinspectionform").length > 0) {
            var validate = $("#newinspectionform").validate({
                errorClass: "has-error",
                validClass: "",
                errorElement: "span",
                ignore: [],
                errorPlacement: function (error, element) {
                    $(element).after(error);
                    $(element).parents(".form-group").addClass("has-error");
                },
                highlight: function (element, errorClass) {
                    $(element).parents(".form-group").removeClass("has-success").addClass(errorClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(".form-group").removeClass(errorClass).addClass(validClass);
                },
                rules: {
                    propertyid: {required: true},
                    type: {required: true},
                    starttime: {required: true, date: true},
                    endtime: {required: true, date: true}
                }
            });
        }

    ... other stuff
</script>

【问题讨论】：

你检查过这个吗？ stackoverflow.com/questions/4809451/…
是的 - 有一些这样的，但不幸的是，这些解决方案对这种情况没有帮助。

标签： jquery validation date internet-explorer

【解决方案1】：

编辑：包括日期选择器

试试这个。它在 IE 中使用 datePicker 工作。您是否也尝试设置时间？如果是这样，我知道有些人已经为 datetimePicker 创建了一个插件。

<!doctype html>
<html>
<head>
</head>
<body>
    <form>
        <input type="date" class="left" id="starttime" name="starttime">
        <br/>
        <input type="submit" value="Validate!">
    </form>
</body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
   //datePicker Set format
   $('#starttime').datepicker({ 
      dateFormat: 'yy-mm-dd'
   }).datepicker("setDate", new Date());


   var validator = $("form").validate ({
       rules: {
            starttime: {required: true, date: true}
      },
       messages: {
            starttime: "Please enter a valid start date"
       }
    });
</script>

【讨论】：

我刚刚编辑了我的问题以包含代码。如您所见，它包含在$(document).ready() 中。此外，其他验证工作 - 问题只是日期

【解决方案2】：

我使用自定义日期方法解决了这个问题。我需要这样做，因为我的格式需要保持为DD-MMM-YYYY hh:mm a，即 2017 年 8 月 31 日上午 9:43。

    $.validator.addMethod(
        "inspDateTime",
        function(value, element) {
            // put your own logic here, this is just a (crappy) example
            return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2} (0?[1-9][012]?:[0-5][0-9] [ap]m)$/);
        },
        "Please enter a valid date."
    );

我不确定为什么 Internet Explorer 无法验证此日期，但上述正则表达式在 IE 中有效。将此答案归功于起始正则表达式：https://stackoverflow.com/a/17392795/2066625

【讨论】：