ASP.NET MVC 验证 - 如何更改 MVC 验证引擎输出的 html？

Question

在表单上使用 ASP.NET MVC 验证时，错误消息会以特定的 html 输出。例如，如果您正在验证必须填写的文本框，则验证失败后的输出将如下所示：

<label for="MonkeyName">Name: </label>
<span class="field-validation-error">*</span>
<br />
<input class="input-validation-error" id="MonkeyName" name="MonkeyName" type="text" value="" />

在上面的代码中，span 标记已由验证框架和名为 input-validation- 的类自动生成。错误已添加到文本框中。但是如果我希望验证器生成不同的 html 该怎么办？

我想使用 MVC 验证框架，但是我想完全控制验证消息的显示方式，特别是因为 MVC 承诺控制 UI。我设计的 HTML 和 CSS（甚至在决定要使用的服务器端编程语言之前）对于错误消息是不同的，因为我想使用文本框的容器而不是文本框本身设置一个类。以此为例：

<dl class="error">
  <dt>
    <label for="email">Email</label>
      <span class="required">Required</span> 
  </dt>
  <dd>
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" />
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    <span class="errormessage">Some Error</span> 
  </dd>
</dl>

虽然我有一个错误消息的范围，但我想使用名为 error 的 css 类设置容器标记 (dl)。有没有办法可以确定验证框架呈现错误消息的方式？

注意：虽然我考虑过使用 jQuery 的解决方案来检测具有“输入验证错误”类的表单字段，并使用我的自定义 css 类“错误”设置它们各自的容器，但我认为这不是一个好的解决方案，并且我认为这是一个可以做得更好的解决方法。如果这解决了问题，我可以从 MVC 2 升级到 MVC 3。

Answer 1

听起来您需要编写一个不同的扩展方法来编辑它们的内容

namespace HtmlExtensions
{
    public static HtmlString CustomValidateFor(this HtmlHelper helper, ...)
    {
        return Edit(helper.ValidateFor(...))
    }
}

Answer 2

您可以追求的一个角度是利用 ASP.NET MVC 不显眼的验证脚本如何使用 data-valmsg-for="inputName"所有元素> 属性，并用 field-validation-error 类标记它们。因此，您可以通过将该属性添加到容器来使用现有功能：

<dl data-valmsg-for="FromEmail" data-valmsg-replace="false">
  <dt>
    <label for="email">Email</label>
    <span class="required">Required</span> 
  </dt>
  <dd>
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" />
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
  </dd>
</dl>

然后，

除了获得之外还将获得 field-validation-error 类<输入>。这里的缺点是您会丢失验证错误消息。如果您使用的是验证摘要，也许这不会成为问题（您可以通过使用 data-valmsg-summary="true" 标记容器并放置 来控制该容器>

中）。

如果在框架内工作不适合您，您可以随时根据自己的喜好调整 jquery.validate.unobtrusive.js。一旦您了解了错误样式/放置代码，它就非常简单（具体来说，请查看第 39 行和第 55 行的 onError 和 onErrors 函数）。