如何同时显示来自服务器端流畅验证和客户端验证的错误消息？答案

【问题标题】：How to display error messages from server side fluent validation AND client side validation at the same time?如何同时显示来自服务器端流畅验证和客户端验证的错误消息？
【发布时间】：2018-11-12 10:34:49
【问题描述】：

我有这个流畅的验证规则：

public EmployeeAbsenceValidator() {
    RuleFor(a => a.DateTo)
        .GreaterThanOrEqualTo(a => a.DateFrom)
        .WithMessage("The end date cannot be before the start date.");
}

在控制器中的 Create POST 方法中，我正在验证日期并保存到数据库，如果日期有效，我将重定向到员工的详细信息视图，如果日期有效，则返回到 create-absence-view不是：

if (ModelState.IsValid)
{
    EmployeeAbsenceValidator validator = new EmployeeAbsenceValidator();
    ValidationResult result = validator.Validate(employeeAbsence);
    if (result.IsValid)
    {
        _context.Add(employeeAbsence);
        await _context.SaveChangesAsync();
        return RedirectToAction("Details", "Employees");
    }
    else
    {
        result.AddToModelState(ModelState, null); // Passing error message to model state
        return View(employeeAbsence);
    }
}

这是创建缺席视图：

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row">
        <div class="form-group col-md-4">
            <label asp-for="Percentage" class="control-label"></label>
            <input asp-for="Percentage" class="form-control" />
            <span asp-validation-for="Percentage" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label asp-for="DateFrom" class="control-label"></label>
            <input asp-for="DateFrom" class="form-control" />
            <span asp-validation-for="DateFrom" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="DateTo" class="control-label"></label>
            <input asp-for="DateTo" class="form-control" />
            <span asp-validation-for="DateTo" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" value="Save">Save</button>
    </div>
</form>

如果Percentage填写正确，且DateTo在DateFrom之前，则在日期显示fluent验证的错误信息。但如果Percentage 无效，则仅显示Percentage 上的客户端错误消息。我猜那是因为服务器不知道日期的无效性，因为表单尚未提交。我怎样才能得到这两个错误消息？（请告诉我我不需要写任何 JQuery...）

【问题讨论】：

你不能。您唯一能做的就是实现相同的验证客户端，是的，这需要 jQuery，因为客户端验证使用 jQuery Validation 库。

标签： c# asp.net-core fluentvalidation

【解决方案1】：

FluentValidation 是一个服务器端框架。并非 FluentValidation 中定义的所有规则都适用于 ASP.NET 的客户端验证。但是您可以使用 Form Helper 库将客户端验证支持添加到 Fluent Validation。

https://github.com/sinanbozkus/FormHelper

将来自 Nuget 包管理器的 FormHelper 添加到您的项目中。

在你的 startup.cs 中注册 FormHelper

services.AddFormHelper();

像这样创建您的表单：

var formConfig = new FormConfig(ViewContext)
{
    FormId = "ProductForm",
    FormTitle = "New Product",
    Callback = "ProductFormCallback" // optional,
};

// <form id="@formConfig.FormId" asp-controller="Home" asp-action="Save"
// ...

@await Html.RenderFormScript(formConfig)

并在您的保存操作中使用此属性进行客户端验证：

[HttpPost, FormValidator]
public IActionResult Save(FormViewModel viewModel)

可以使用了。

您可以查看 github 页面了解更多信息。

【讨论】：