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

Question

使用带有 DateTime 类型的 RangeAttribute 来指定日期属性的最小值和最大值不起作用。已提出有关如何解决此问题的问题 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 的底部，但它似乎不会影响表单上显示的验证错误。

Answer 1

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 条件 block 内)可以是当函数由该特定元素触发时达到。

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