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

RangeAttribute for DateTime validation not working in MVC web app

使用类型为 DateTimeRangeAttribute 来指定日期 属性 的最小值和最大值不起作用。有人问了一个关于如何解决这个问题的问题 here,投票最高的解决方案是:

There is no need to disable jQuery date validation (and that is likely to cause other issues). You just need to override the range method of the $.validator.

By default, it works with numeric values (and then falls back to a string comparison), so you can add the following script (after jquery.validate.js and jquery.validate.unobtrusive.js, but not wrapped in $(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 的底部,但它似乎不会影响出现在表单上的验证错误。

The script now appears at the bottom of the generated HTML, however it doesnt seem to affect the validation error that appears on the form.

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

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

此外,如果该元素不包含如下所示的 data-val-date="true",您可以像下面这样修改代码,使代码片段(在 if 条件块内)可以在特定的函数触发时到达元素.

开始日期时间属性

[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>
}