代码之家 › 专栏 › 技术社区 › Cá´ÊÊ bcherry

由于格式化,DateTime客户端验证失败

fluentvalidation jquery-validate asp.net-mvc-5

Cá´ÊÊ bcherry · 技术社区 · 6 年前

我在MVC5项目中使用FluentValidation,除了日期之外没有任何问题。我的目标是 GreaterThanOrEqualTo 对一些日期字段进行客户端验证。我知道当前文档没有将此方法列为受支持的客户端,但它呈现了正确的jQuery验证数据属性。

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Credit Decision Due Date")]
public DateTime? DueDate { get; set; }

<div class="control-group">
    @Html.LabelFor(m => m.DueDate, new { @class = "control-label text-bold" })
    @Html.TextBoxFor(m => m.DueDate, "{0:MM/dd/yyyy}", new { @class = "span12 date-picker" })
    @Html.ValidationMessageFor(m => m.DueDate)
</div>

在我的验证器中,只有一个简单的规则:

RuleFor(m => m.DueDate).GreaterThanOrEqualTo(DateTime.Today);

注意,我也试过了 InclusiveBetween

RuleFor(r => r.DueDate).InclusiveBetween(DateTime.Today, DateTime.Today.AddYears(1));

视图渲染的结果

<div class="control-group">
    <label class="control-label text-bold" for="DueDate">Credit Decision Due Date <span class="text-error required-asterisk">*</span></label>
    <input class="span12 date-picker hasDatepicker" data-val="true" data-val-range="'Credit Decision Due Date' must be greater than or equal to '9/27/2018 12:00:00 AM'." data-val-range-max="" data-val-range-min="09/27/2018 00:00:00" data-val-required="'Credit Decision Due Date' must not be empty." id="DueDate" name="DueDate" type="text" value="">
    <span class="field-validation-valid help-block" data-valmsg-for="DueDate" data-valmsg-replace="true"></span>
</div>

文本 Date . 例如,假阴性:

$('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    onClose: function () {
        $(this).valid();
    }
});

我正在使用以下库版本:

查询1.11.3
jQuery验证1.17

我知道我可以编写一个自定义验证器,将输入值和范围值解析为JavaScript 日期 对象,但似乎应该有内置的东西让所有东西都能识别这些字符串作为日期。

我错过了什么?

1 回复 | 直到 6 年前

user3559349 user3559349 6 年前

问题是 range jquery.validate.js 处理数值,如果不是数值,则进行字符串比较。

您可以通过添加自己的规则来比较日期来覆盖默认行为。将以下脚本添加到 validate* $(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() || 0;
        var maxDate = new Date(max).getTime() || 8640000000000000;
        return this.optional(element) || (date >= minDate && date <= maxDate);
    }
    // use the default method
    return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
};

TextBoxFor() 方法应生成 data-val-date="The field Credit Decision Due Date must be a date." 属性。我不确定您是从显示的结果html中省略了它,还是有其他代码省略了它。如果没有生成,则需要修改 if ($(element).attr('data-val-date')) { 一行代码,例如使用类名

if ($(element).hasClass('date-picker')) {

还要注意的是

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]

TextBoxFor() -只有在使用 EditorFor() EditorFor() DataFormatString = "{0:yyyy-MM-dd}" The specified value does not conform to the required format yyyy-MM-dd