DateTime 验证的 RangeAttribute 在 MVC Web 应用程序中不起作用
RangeAttribute for DateTime validation not working in MVC web app
使用类型为 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 的底部,但它似乎不会影响出现在表单上的验证错误。
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>
}
使用类型为 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 的底部,但它似乎不会影响出现在表单上的验证错误。
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>
}