MVC 中带有感叹号图标的验证错误消息答案

【问题标题】：Validation error message with exclamation icon in MVCMVC 中带有感叹号图标的验证错误消息
【发布时间】：2017-03-28 20:35:50
【问题描述】：

我正在研究 MVC 5 视图设计，在该设计中我需要在之前显示带有感叹号图标/图像的错误消息，例如 here

是否可以使用@Html.ValidationMessageFor() 验证消息来显示感叹号图标/图像（响应式）？

我尝试在验证消息之前添加 glyphicon，

 @Html.TextBoxFor(m => m.Email, new { @class = "form-control text-line", @placeholder = "Email Id *" })
 <i class="glyphicon glyphicon-exclamation-sign colorRed"></i>@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

问题：
1. 像上面这样实现，总是显示感叹号，我需要它只有在发生验证错误时才显示。
2. 有没有其他方法使用脚本或样式来实现这一点，以及自定义图标图像？

【问题讨论】：

ValidationMessageFor() 如果属性值无效，则添加class="field-validation-error"。您可以使用一些带有伪选择器的 css - .field-validation-error:before { ... 来生成图标，以便它仅在出现错误时出现。

标签： html asp.net-mvc

【解决方案1】：

您可以使用 css 为您的错误消息添加背景图片

.text-danger{
 background-image: url('dangerimg.png');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
}

如果你想在错误信息之前添加字符，你可以使用

 .text-danger::before {
     content:'!';
    }

【讨论】：

【解决方案2】：

.field-validation-error:before {
content: url('../images/image.png');
}

这仅在Stephen Muecke 所说的错误发生时才显示图像

.text-danger{
 content: url('../images/image.png');
}

.text-danger 类即使没有错误也会显示图像。

【讨论】：