DateTime 验证的 RangeAttribute 在 MVC Web 应用程序中不起作用

Question

使用RangeAttribute 类型为DateTime 来指定日期属性的最小值和最大值不起作用。有人向here 提出了一个关于如何解决此问题的问题，投票率最高的解决方案是：

没有必要禁用 jQuery 日期验证（这很可能 导致其他问题）。您只需要覆盖的范围方法 $.validator。

默认情况下，它适用于数值（然后回退到 字符串比较），因此您可以添加以下脚本（在 jquery.validate.js 和 jquery.validate.unobtrusive.js，但未包装 在 $(document).ready

$.validator.methods.range = function(value, element, param) {
    if ($(element).attr('data-val-date')) {
        var min = $(element).attr('data-val-range-min');
        var max = $(element).attr('data-val-range-max');
        var date = new Date(value).getTime();
        var minDate = new Date(min).getTime();
        var maxDate = new Date(max).getTime();
        return this.optional(element) || (date >= minDate && date <= maxDate);
    }
    // use the default method
    return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
};

有人可以帮我了解如何实施此解决方案吗？ （我的 HTML 和 Javascript 知识非常差，因此非常感谢任何帮助。）

---

根据解决方案的描述，我假设我希望这个脚本最终出现在生成的 HTML 的底部，所以我尝试将它添加到我的_ValidationScriptsPartial.cshtml，所以我现在有了：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
    $.validator.methods.range = function(value, element, param) {
    if ($(element).attr('data-val-date')) {
        var min = $(element).attr('data-val-range-min');
        var max = $(element).attr('data-val-range-max');
        var date = new Date(value).getTime();
        var minDate = new Date(min).getTime();
        var maxDate = new Date(max).getTime();
        return this.optional(element) || (date >= minDate && date <= maxDate);
    }
    // use the default method
    return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
};
</script>

该脚本现在出现在生成的 HTML 的底部，但它似乎不会影响表单上出现的验证错误。

Answer 1

脚本现在出现在生成的 HTML 的底部，但它似乎不会影响表单上出现的验证错误。

根据您提供的代码，我怀疑它可能无法到达if ($(element).attr('data-val-date')) 代码块，这会导致您自定义的客户端验证功能无法按预期工作。

请检查相应元素的源代码并确保它具有data-val-date 属性。

此外，如果元素不包含data-val-date="true"，如下所示，您可以修改如下代码以使该特定元素触发该函数时可以到达代码sn-p（在if条件块内）。

StartDateTime 属性

[Range(typeof(DateTime), "1/1/2020", "2/29/2020")]
public DateTime StartDateTime { get; set; }

该特定元素的 HTML 源代码

修改代码以检查当前元素是否是带有if $(element).attr('id') == "StartDateTime")的特定元素

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script>
    $.validator.methods.range = function (value, element, param) {

        //console.log(param);

        if ($(element).attr('id') == "StartDateTime") {
            var min = $(element).attr('data-val-range-min');
            var max = $(element).attr('data-val-range-max');
            var date = new Date(value).getTime();
            var minDate = new Date(min).getTime();
            var maxDate = new Date(max).getTime();
            console.log(minDate + " | " + maxDate + " | " + date);

            return this.optional(element) || (date >= minDate && date <= maxDate);
        }
        // use the default method
        return this.optional(element) || (value >= param[0] && value <= param[1]);
    }
</script>
}