向 Blazor(Razor) 验证添加类

Question

我知道 Blazor 开发仍处于早期阶段，但我想知道是否有人遇到过将类应用于 Blazor (Razor) 验证消息的方法？这是代码示例。

        <EditForm Model="@Employee" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group row">
            <label for="lastName" class="col-sm-3">Last Name: </label>
            <div class="col-sm-8">
                <InputText id="lastName" @bind-Value="@Employee.LastName" class="form-control" placeholder="Enter last name" />
                <ValidationMessage For="@(() => Employee.LastName)" />
            </div>
        </div>

我希望能够在验证消息中添加

text-danger

、

col-sm-8

或其他类。我已经知道我可以使用默认的

validation-error

类通过 CSS 来完成此操作。

Answer 1

如上所述，您可以对

ValidationMessage

组件类进行子类化...我会给您一个更简单的解决方案，因为我不喜欢在我的项目中仅仅为了稍微改变外观而拥有大量的类。

只需用

ValidatorMessage

包裹

div

并对其应用类即可：

<div class="col-sm-8 text-danger">
    <ValidationMessage For="@(() => Employee.LastName)" />
</div>

无论如何，

ValidationMessage

组件所做的（通过代码）是使用类“

div

”渲染一个简单的

validation-message

，因此，如果您遇到未应用任何样式的问题，请考虑您可以强制样式使用正确的 CSS 选择器（也许还有一些

!important

标签...）。

Answer 2

好像不能添加类，但是可以添加样式：

<ValidationMessage
    For="..."
    style="color: #dc3545!important;
           flex: 0 0 66.666667%;
           max-width: 66.666667%;" />

您还可以重写

validation-message

类，如文档here：

控制应用程序样式表中验证消息的样式（

wwwroot/css/app.css

或

wwwroot/css/site.css

）。默认

validation-message

类将验证消息的文本颜色设置为红色：

.validation-message {
    color: red;
}