如何使用FluentValidation在客户端验证日期？

Question

问题

下面的代码在服务器端可以正常工作，但在客户端无法正常工作，为什么？

当我提交表单时，控件会转到BeAValidDate函数来检查日期是否有效。是否有办法使用Fluent Validation在不连接服务器的情况下验证日期？

脚本

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.js" type="text/javascript"></script>

模型

public class PersonValidator : AbstractValidator<Person>
{
    public PersonValidator()
    {
        RuleFor(x => x.FromDate)
            .NotEmpty()
            .WithMessage("Date is required!")
            .Must(BeAValidDate)
            .WithMessage("Invalid Date");
    }

    private bool BeAValidDate(String value)
    {
        DateTime date;
        return DateTime.TryParse(value, out date);
    }
}

控制器

public class PersonController : Controller
{
    public ActionResult Index()
    {
       return View(new Person { FromDate = DateTime.Now.AddDays(2).ToString()});
    }

    [HttpPost]
    public ActionResult Index(Person p)
    {
        return View(p);
    }
}

查看

@using (Html.BeginForm("Index", "Person", FormMethod.Post))
{   
    @Html.LabelFor(x => x.FromDate)
    @Html.EditorFor(x => x.FromDate)
    @Html.ValidationMessageFor(x => x.FromDate)

    <input type="submit" name="Submit" value="Submit" />
}

- SMC

---

您在 web.config 中启用了客户端和非侵入式验证吗？ - JTMon

你设置了FluentValidationModelValidatorProvider吗？ - Fals

@JTMon ：与数据注释正常工作的非侵入性。我很想了解有关日期的客户端流畅验证的内容。 - SMC

这个问题与你的类似，你可以在这里看到如何使用jquery.validate.js来适应FluentValidation。 这是另一个问题，在这个答案中提到了这个链接与ASP.NET MVC的集成，其中解释了如何集成和扩展一些验证并接受其他验证。 在这里你可以看到带有客户端验证的NotEqual Fluent Validation验证器。 - andres descalzo

Answer 1

使用大于或等于验证器的技巧。对我有效。

Global.asax - 应用程序启动事件

FluentValidationModelValidatorProvider.Configure(x =>
{
    x.Add(typeof(GreaterThanOrEqualValidator), 
            (metadata, Context, rule, validator) => 
                new LessThanOrEqualToFluentValidationPropertyValidator
                (
                    metadata, Context, rule, validator
                )
            );
});

模型

[Validator(typeof(MyViewModelValidator))]
public class MyViewModel
{
    [Display(Name = "Start date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", 
                                                  ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }

    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", 
                                                  ApplyFormatInEditMode = true)]
    public DateTime DateToCompareAgainst { get; set; }
}

规则

public class MyViewModelValidator : AbstractValidator<MyViewModel>
{
    public MyViewModelValidator()
    {
        RuleFor(x => x.StartDate)
            .GreaterThanOrEqualTo(x => x.DateToCompareAgainst)
            .WithMessage("Invalid start date");
    }
}

FluentValidationPropertyValidator

public class GreaterThenOrEqualTo : FluentValidationPropertyValidator
{
    public GreaterThenOrEqualTo(ModelMetadata metadata, 
                                ControllerContext controllerContext, 
                                PropertyRule rule, 
                                IPropertyValidator validator)
        : base(metadata, controllerContext, rule, validator)
    {
    }

    public override IEnumerable<ModelClientValidationRule> 
                                                    GetClientValidationRules()
    {
        if (!this.ShouldGenerateClientSideRules())
        {
            yield break;
        }

        var validator = Validator as GreaterThanOrEqualValidator;

        var errorMessage = new MessageFormatter()
            .AppendPropertyName(this.Rule.GetDisplayName())
            .BuildMessage(validator.ErrorMessageSource.GetString());

        var rule = new ModelClientValidationRule{
            ErrorMessage = errorMessage,
            ValidationType = "greaterthanorequaldate"};
        rule.ValidationParameters["other"] = 
            CompareAttribute.FormatPropertyForClientValidation(
                validator.MemberToCompare.Name);
        yield return rule;
    }
}

控制器操作方法

public ActionResult Index()
{
    var model = new MyViewModel
    {
        StartDate = DateTime.Now.AddDays(2),
        DateToCompareAgainst = default(DateTime)  //Default Date
    };
    return View(model);
}
[HttpPost]
public ActionResult Index(Practise.Areas.FluentVal.Models.MyViewModel p)
{
    return View(p);
}

视图

@using (Html.BeginForm("Index", "Person", FormMethod.Post, 
                                                new { id = "FormSubmit" }))
{   
    @Html.Hidden("DateToCompareAgainst", Model.DateToCompareAgainst);      
    @Html.LabelFor(x => x.StartDate)
    @Html.EditorFor(x => x.StartDate)
    @Html.ValidationMessageFor(x => x.StartDate)
    <button type="submit">
        OK</button>
}

脚本

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
    (function ($) {
        $.validator.unobtrusive.adapters.add('greaterthanorequaldate', 
                                             ['other'], function (options) {
            var getModelPrefix = function (fieldName) {
                return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
            };

            var appendModelPrefix = function (value, prefix) {
                if (value.indexOf("*.") === 0) {
                    value = value.replace("*.", prefix);
                }
                return value;
            }

            var prefix          = getModelPrefix(options.element.name),
                other           = options.params.other,
                fullOtherName   = appendModelPrefix(other, prefix),
            element = $(options.form).find(":input[name=" + fullOtherName + 
                                                        "]")[0];

            options.rules['greaterthanorequaldate'] = element;
            if (options.message != null) {
                options.messages['greaterthanorequaldate'] = options.message;
            }
        });

---

        $.validator.addMethod('greaterthanorequaldate', 
                               function (value, element, params) {
            var date = new Date(value);
            var dateToCompareAgainst = new Date($(params).val());

            if (isNaN(date.getTime()) || isNaN(dateToCompareAgainst.getTime())) {
                return false;
            }
            return date >= dateToCompareAgainst;
        });

    })(jQuery);
</script>

- Imad Alazani

---

为了比较一个数字而做的一切。 - Ronnie Overby

Answer 2

关于您的设置和不起作用的事情，有些我不理解。您是指日期必须有效的验证不起作用，还是日期必填不起作用？

Fluent Validation 能够为不显眼的验证发出代码，所以必需的约束应该能够正常工作。 日期是否有效是完全另一回事。如果您将 FromDate 指定为 DateTime（您是否将其声明为 DateTime 还是字符串？），则日期正确性的验证将由 Mvc 框架中包含的其他验证器自动执行，因此您无需在流畅的验证规则中重复它。然而，在 Mvc4 之前，这种验证检查仅在服务器端执行。随着 Mvc 4 的推出，Asp.net Mvc 团队解决了这个问题，并将检查扩展到了客户端。 但是，在客户端，只有 en-US 日期格式才能正常工作，因为不显眼的验证不处理全球化。如果您需要其他文化中的日期，则需要使用 Globalize 库，并在客户端设置全球化。如果您对全球化感兴趣，可以查看 我的博客文章。 要将自动日期更正添加到 Mvc 3 中。您必须定义一个扩展的 ClientDataTypeModelValidatorProvider，就像 Mvc4 中的那个一样。以下是代码：

public class ClientDataTypeModelValidatorProviderExt : ClientDataTypeModelValidatorProvider
{
    public static Type ErrorMessageResources { get; set; }
    public static string NumericErrorKey { get; set; }
    public static string DateTimeErrorKey { get; set; }
    private static readonly HashSet<Type> _numericTypes = new HashSet<Type>(new Type[] {
        typeof(byte), typeof(sbyte),
        typeof(short), typeof(ushort),
        typeof(int), typeof(uint),
        typeof(long), typeof(ulong),
        typeof(float), typeof(double), typeof(decimal)
    });
    private static bool IsNumericType(Type type)
    {
        Type underlyingType = Nullable.GetUnderlyingType(type); // strip off the Nullable<>
        return _numericTypes.Contains(underlyingType ?? type);
    }
    internal sealed class NumericModelValidator : ModelValidator
    {
        public NumericModelValidator(ModelMetadata metadata, ControllerContext controllerContext)
            : base(metadata, controllerContext)
        {
        }

        public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
        {
            ModelClientValidationRule rule = new ModelClientValidationRule()
            {
                ValidationType = "number",
                ErrorMessage = MakeErrorString(Metadata.GetDisplayName())
            };

            return new ModelClientValidationRule[] { rule };
        }

        private static string MakeErrorString(string displayName)
        {
            // use CurrentCulture since this message is intended for the site visitor
            return String.Format(CultureInfo.CurrentCulture, ErrorMessageResources.GetProperty(NumericErrorKey, System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static).GetValue(null, null) as string, displayName);
        }

        public override IEnumerable<ModelValidationResult> Validate(object container)
        {
            // this is not a server-side validator
            return Enumerable.Empty<ModelValidationResult>();
        }
    }
    internal sealed class DateTimeModelValidator : ModelValidator
    {
        public DateTimeModelValidator(ModelMetadata metadata, ControllerContext controllerContext)
            : base(metadata, controllerContext)
        {
        }

        public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
        {
            ModelClientValidationRule rule = new ModelClientValidationRule()
            {
                ValidationType = "globalizeddate",
                ErrorMessage = MakeErrorString(Metadata.GetDisplayName())
            };

            return new ModelClientValidationRule[] { rule };
        }

        private static string MakeErrorString(string displayName)
        {
            // use CurrentCulture since this message is intended for the site visitor
            return String.Format(CultureInfo.CurrentCulture, ErrorMessageResources.GetProperty(DateTimeErrorKey, System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static).GetValue(null, null) as string, displayName);
        }

        public override IEnumerable<ModelValidationResult> Validate(object container)
        {
            // this is not a server-side validator
            return Enumerable.Empty<ModelValidationResult>();
        }
    }
    public override IEnumerable<ModelValidator> GetValidators(ModelMetadata metadata, ControllerContext context)
    {

        if (metadata == null)
        {
            throw new ArgumentNullException("metadata");
        }
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }
        List<ModelValidator> res = null;
        if (NumericErrorKey == null || ErrorMessageResources == null)
            res = base.GetValidators(metadata, context).ToList();
        else
        {
            res = new List<ModelValidator>();
            if (IsNumericType(metadata.ModelType))
            {
                res.Add(new NumericModelValidator(metadata, context));
            }
        }
        if ( (metadata.ModelType == typeof(DateTime) || metadata.ModelType == typeof(DateTime?)))
        {
            if(ErrorMessageResources != null && DateTimeErrorKey != null)
                res.Add(new DateTimeModelValidator(metadata, context));
        }
        return res;
    }
}

然后在 global.asax 中，您必须将标准的替换为以下内容：

var old = ModelValidatorProviders.Providers.Where(x => x is ClientDataTypeModelValidatorProvider).FirstOrDefault();
        if (old != null) ModelValidatorProviders.Providers.Remove(old);
        ModelValidatorProviders.Providers.Add(new ClientDataTypeModelValidatorProviderExt());

现在你需要添加JavaScript代码片段来在客户端执行控制：

$.validator.addMethod(
"globalizeddate",
 function (value, element, param) {
    if ((!value || !value.length) && this.optional(element)) return true; /*success*/       
    var convertedValue  = Globalize.parseDate(value);
            return !isNaN(convertedValue) && convertedValue;
  },
  "field must be a date/time"

);

在这里，我使用了Globalize函数来验证正确的日期。请安装它。这是唯一一种与.NET格式兼容的日期格式。此外，它适用于所有.NET文化。在某些浏览器中，使用标准的JavaScript日期解析不兼容.NET接受的格式。

- Francesco Abbruzzese

---

谢谢你的回答。你能分享一下你在 MVC3 方面的经验吗？ - SMC

将客户端验证添加到流畅验证的方法是实现一个验证器，因此您不能仅使用.Must，因为它不允许添加验证。只要您的验证器实现了IClientValidatable接口即可。流畅验证项目在此处说明如何创建自定义验证器：https://fluentvalidation.codeplex.com/wikipage?title=Custom&referringTitle=Documentation 为了添加客户端验证，您的自定义验证器必须实现IClientValidatable接口。 - Francesco Abbruzzese

实现 IClientValidatable 的方式与 DataAnnotations 完全相同。不幸的是，这个原因在流畅验证网站上没有得到解释。请参见此处以了解实现所有客户端验证内容的简单方法：https://dev59.com/8m435IYBdhLWcg3w4UWs 虽然这是针对 DataAnnotations 的，但正如我所说，它们是相同的。在 .Net 方面，您的验证器必须实现相同的 IClientValidatable 类，在 JavaScript 方面，相关内容也完全相同。 - Francesco Abbruzzese

话虽如此，数据有效性的检查不应该针对每个DateTime实现规则，而应像Mvc4一样自动应用于所有DateTime。这样做的方法是用Mvc 3的ClientDataTypeModelValidatorProvider替换只标记格式错误数字的验证器，而是使用一个也验证日期的验证器（就像Mvc 4中的那个）。我有解决问题的代码，但它不够自包含，无法在此处插入，如果您感兴趣，我可以提供给您该代码。 - Francesco Abbruzzese

什么样例代码？一个ClientDataTypeModelValidatorProvider，能够自动标记所有格式不正确的日期，这是你在示例中所需要的，还是如何实现IClientValidatable接口+相关的javascript内容？ - Francesco Abbruzzese

是的。需要更正我的代码，以便可以在客户端上开始工作以检查有效日期。 - SMC

Answer 3

在 MVC 3 中，下面的代码应该可以正常工作。

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("Index", "Person", FormMethod.Post))
{   
    @Html.LabelFor(x => x.FromDate)
    @Html.EditorFor(x => x.FromDate)
    @Html.ValidationMessageFor(x => x.FromDate)

    <input type="submit" name="Submit" value="Submit" />
}

MVC 4中的简单工作示例

_Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />


        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>

        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)


    </body>
</html>

视图：

@model Mvc4Test.Models.Person

@{
    ViewBag.Title = "test";

}

<h2>test</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Part</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>



        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

了解更多详情。

- chamara

---

这被称为数据注释，而不是流畅验证。对吗？ - SMC