CSS ValidationSummary 和 ValidationMessageFor 的自定义样式显示（当没有错误时）

在本文中，我们将介绍如何使用 CSS ValidationSummary 和 ValidationMessageFor 来在没有错误时显示自定义样式。

阅读更多：CSS 教程

ValidationSummary 和 ValidationMessageFor 简介

在开发 Web 应用程序时，表单验证是非常重要的一部分。ASP.NET MVC 提供了两个非常有用的 HTML 辅助方法，即 ValidationSummary 和 ValidationMessageFor，用于显示表单验证消息。

ValidationSummary 方法用于显示将整个表单中的验证错误汇总的消息。通常，它位于表单的顶部或底部，以便用户可以快速查看验证错误的摘要。

ValidationMessageFor 方法用于在特定控件的旁边显示针对该控件的验证错误消息。这对于在每个控件旁边单独显示错误消息是非常有用的。

自定义样式显示

ValidationSummary 和 ValidationMessageFor 方法默认会使用一些 CSS 类来显示验证错误消息。然而，有时我们想要自定义这些样式，以使其适应我们的应用程序的外观和感觉。我们可以通过为这些方法添加自定义 CSS 类来实现这一点。

下面是一个示例，展示了如何使用自定义 CSS 类来显示 ValidationSummary 和 ValidationMessageFor 方法在没有错误时的样式：

@model YourModel

<style>
    .error-summary {
        /* 自定义样式 */
    }

    .error-message {
        /* 自定义样式 */
    }
</style>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "", new { @class = "error-summary" })

    <div class="form-group">
        @Html.LabelFor(model => model.Name)
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "error-message" })
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Email)
        @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "error-message" })
    </div>

    <input type="submit" value="Submit" class="btn btn-primary" />
}

在上面的示例中，我们在 style 标签内定义了两个自定义 CSS 类：.error-summary 和 .error-message。这些类将被用于 ValidationSummary 和 ValidationMessageFor 方法。

在表单中，我们使用 @Html.ValidationSummary(true, "", new { @class = "error-summary" }) 方法来显示 ValidationSummary 消息。通过将第一个参数设置为 true，我们只显示非字段错误，通过将第二个参数设置为空字符串，我们不显示标题。最后，通过将 new { @class = "error-summary" } 添加为第三个参数，我们将自定义 CSS 类应用于 ValidationSummary。

对于每个表单字段，我们使用 @Html.ValidationMessageFor 方法来显示 ValidationMessageFor 消息。通过将第二个参数设置为空字符串，我们不显示默认错误消息。最后，通过将 new { @class = "error-message" } 添加为第三个参数，我们将自定义 CSS 类应用于 ValidationMessageFor。

总结

本文介绍了如何使用 CSS ValidationSummary 和 ValidationMessageFor 来在没有错误时显示自定义样式。通过为这些方法添加自定义 CSS 类，我们可以轻松地调整它们的外观，以适应我们的应用程序的需求。这使得我们能够为用户提供更好的用户体验，并确保他们能够清楚地了解表单验证消息。希望这篇文章对你有所帮助！