我可以区分 ErrorMessage 和 Razor 页面中显示的错误文本吗

Question

我有 Web 表单背景，正在尝试学习 Razor 页面。在 Web 窗体中，我非常广泛地使用 asp:Validation 控件。这些验证控件使我可以选择指定将在验证摘要中显示的错误消息，以及可以在代码中控件所在位置（字段后面）显示的文本。因此，通常我会设置详细的错误消息（用于摘要），并为文本设置一个 *（用于违规字段旁边）。这会突出显示需要注意的字段，但会将长消息（可能会影响该字段附近的格式）归入验证摘要。这是我可能用来执行此操作的示例代码：

<asp:TextBox ID="txtTitle" runat="server" />
<asp:RequiredFieldValidator ID="rfbTitleRequired" runat="server" ErrorMessage="Title is required." 
    Text="*" ControlToValidate="txtTitle" Display="Static" />

在 Razor 页面中是否有等效的方法可以执行此操作？我有一个数据模型，并且使用 DataAnnotations 来指定该字段所需的验证。该字段已正确验证，在验证摘要中显示错误消息信息，但它还会将错误消息放在该字段旁边。我宁愿让它显示一个 * 而不是错误的全文。是否有一种内置方法可以让 Razor 页面执行此操作，类似于 Web 表单中的验证控件？这是我的 Razor 示例代码：

在 csthml 文件中，我定义了输入字段、输入字段后的验证范围以及表单末尾的验证摘要：

<div>
    <label asp-for="Phone">Phone:</label>
    <input asp-for="Phone" />
    <span asp-validation-for="Phone" class="text-danger"></span>
</div>
<div asp-validation-summary="All" class="text-danger">Please correct the following errors:</div>

然后在我的数据模型的定义类中，我有以下属性：

[Required(ErrorMessage = "Phone is required."), RegularExpression("^(1?(-?\\d{3})-?)?(\\d{3})(-?\\d{4})$", ErrorMessage = "Invalid format for phone.")]
public string Phone { get; set; }

我只是想知道是否有一种方法可以在且仅当验证失败时在有问题的字段后动态显示 *，或者是否需要大量的外部编码？

Answer 1

**感谢here的帖子引导我开发此解决方案的代码，以及MS Learning让我开始学习CSS部分。

它似乎不能像 Web 表单验证控件一样自动完成，但如果您利用内置 CSS 类并对 HTML 进行一些更改，就可以完成。

首先，为您的摘要信息创建一个 div。不要使用 asp-validation-summary 帮助器，而是将所有 asp-validation-for 元素移动到这个新的 div 摘要部分。给它一个 clientside-validation-summary 的 CSS 类（这样我们就可以用我们自己的样式来定位它）。接下来，将您要验证的每个输入放入一个范围内。它看起来像这样：

<div>
    <label asp-for="Phone">Phone:</label>
    <span><input asp-for="Phone" /></span>
</div>
<div class="form-group clientside-validation-summary">
    <span asp-validation-for=".Phone" class="text-danger"></span>
</div>

接下来创建一些CSS：

.clientside-validation-summary{
    display: flex;
    flex-flow: column nowrap;

    span.field-validation-error::before {
        content: "*";
        padding-right: .3rem;
    }
}
span:has(> input.input-validation-error)::after{ 
    content: "*";
    padding-left: .3rem;
    color: red;
}

clientside-validation-summary 类将格式化我们的“摘要”部分并将项目符号添加到我们的错误列表中。

span:has 部分将针对任何具有 input-validation-error 类（由系统应用）的输入的 span 元素。这将在跨度后添加一个 *。我们无法直接定位输入元素，因为它不被视为容器元素，因此不支持伪元素，例如 ::after。

因为我们已经将 asp-validation-for 元素向下移动并将它们放在一起，所以我们得到了看起来像摘要的内容，并且我们已经确定了输入的目标，因此我们还在每个无效字段后面得到了 *。