Fluent Validation：ASP.NET MVC验证错误时修改控件CSS样式

嘿，我来帮你搞定在ASP.NET MVC里用Fluent Validation时给验证失败的控件加CSS类的问题！

首先得确认你已经把Fluent Validation和MVC正确集成了——在Global.asax.cs的Application_Start方法里加上这行代码，确保MVC能识别你的验证规则：

protected void Application_Start()
{
    // 其他初始化代码
    FluentValidationModelValidatorProvider.Configure();
}

接下来给你两种实现控件加错误样式的方案，按需选择：

方案1：用MVC内置的验证样式（最简单） #

MVC默认会给验证失败的输入控件自动加上input-validation-error类，你只需要在CSS里定义这个类的样式就行：

.input-validation-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    background-color: #fff5f5;
}

同时要确保你的控制器方法正确处理验证：

[HttpPost]
public ActionResult Save(AnnouncementModel model)
{
    if (!ModelState.IsValid)
    {
        // Ajax请求返回带验证错误的部分视图
        return PartialView("_AnnouncementForm", model);
    }
    // 正常保存逻辑
    return Json(new { success = true });
}

这样当验证失败时，TextBoxFor生成的输入框会自动带上错误样式类。

方案2：自定义错误样式类名 #

如果你不想用默认的类名，可以通过两种方式修改：

方法A：Web.config全局配置

在Web.config的<appSettings>节点里添加配置，直接指定输入控件的错误类名：

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    <add key="ValidationInputCssClass" value="custom-error-input" />
</appSettings>

然后在CSS里定义这个自定义类：

.custom-error-input {
    border: 2px solid orange;
    background-color: #fff8e1;
}

方法B：客户端jQuery Validate配置

如果需要更灵活的客户端控制，在视图的脚本部分覆盖jQuery Validate的高亮逻辑：

$(document).ready(function () {
    // 自定义验证错误的控件样式
    $.validator.setDefaults({
        highlight: function(element) {
            $(element).addClass('custom-error-input');
        },
        unhighlight: function(element) {
            $(element).removeClass('custom-error-input');
        }
    });

    $("#SendingDate").datepicker();
});

额外小优化 #

你的验证器代码可以合并成更简洁的写法，功能完全一致：

public AnnouncementValidator()
{
    RuleFor(a => a.Title)
        .NotEmpty().WithMessage("Announcement Title is required")
        .MaximumLength(50).WithMessage("Announcement Title should be 50 characters or less");
}

内容的提问来源于stack exchange，提问作者user2931442