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

Question

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

无需禁用 jQuery 日期验证（这可能会导致其他问题）。你只需要重写 $.validator 的 range 方法。

默认情况下，它使用数值（然后回退到字符串比较），因此您可以添加以下脚本（在 jquery.validate.js 和 jquery.validate.unobtrusive.js 之后，但不包含在 $(document) 。准备好

$.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 的底部，但它似乎不会影响出现在表单上的验证错误。

标签： jqueryasp.net-coreasp.net-core-mvcmodel-validation

Answer 1

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

根据您提供的代码，我怀疑它可能无法进入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>
}