Blazor 验证错误消息和边框显示为黑色而不是红色-解网

问：

我有一个具有简单表单输入的 Blazor WASM 项目。验证有效，但错误显示为黑色而不是红色。

错误呈现黑色（https://i.stack.imgur.com/q0CpC.png)

这是表单的html

@using Microsoft.AspNetCore.Components.Forms
@inject IJSRuntime JsRuntime

<EditForm Model="memberModel">
    <DataAnnotationsValidator/>
    <ValidationSummary />
    <div class="form-group">
        <label for="firstName">First Name</label>
        <InputText class="form-control" id="firstName" @bind-Value=memberModel.FirstName />
    </div>
    <div class="form-group">
        <label for="lastName">Surname</label>
        <InputText class="form-control" id="lastName" @bind-Value=memberModel.Surname />
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <InputText id="lastName" type="email" class="form-control" placeholder="[email protected]" @bind-Value=memberModel.Email />
    </div>
    <div class="form-group">
        <label for="userName">User Name</label>
        <InputText class="form-control" id="userName" @bind-Value=memberModel.UserName />
    </div>
    <div class="form-group">
        <label for="password1">Password</label>
        <InputText type="password" class="form-control" id="password1" @bind-Value=memberModel.Password />
    </div>
    <div class="form-group">
        <label for="password2">Repeat Password</label>
        <InputText type="password" class="form-control" id="password2" @bind-Value=memberModel.Password2 />
    </div>
    <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
    public MemberModel memberModel = new MemberModel();

    public async Task Submit()
    {
        await JsRuntime.InvokeVoidAsync("alert", "Warning!");
    }
}

我的类中的属性

public class MemberModel
{
    [BsonId]
    [BsonIgnoreIfNull]
    [BsonRepresentation(BsonType.ObjectId)]
    public string Id { get; set; }

    [Required(ErrorMessage = "First name is required")]
    [BsonElement("first-name")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Surname is required"),MinLength(2, ErrorMessage = "Surname must be at least 2 characters long")]
    [BsonElement("surname")]
    public string? Surname { get; set; }

索引：.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>NET6.BlazorWebAssemblyApp</title>
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Add chart.js reference if Chart components are used in the application. -->
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
</body>

</html>

我知道以红色显示是开箱即用的行为，为什么我的不是呢？

asp.net 验证 blazor-webassembly webassembly

Blazor 验证错误消息和边框显示为黑色而不是红色

Blazor Validation Error messages and borders show in Black instead of Red

评论