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

【问题标题】：ASP.NET MVC validation - How can I change the html that is output by the validation engine of MVC?ASP.NET MVC 验证 - 如何更改 MVC 验证引擎输出的 html？
【发布时间】：2011-05-07 14:40:36
【问题描述】：

在表单上使用 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-error 的类。但是如果我想让验证器生成不同的 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。

【问题讨论】：

标签： asp.net-mvc jquery-validate validation rendering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

<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>

然后，<dl> 将获得除 <input> 之外的 field-validation-error 类。这里的缺点是您丢失了验证错误消息。如果您使用的是验证摘要，那么这可能不是问题（您可以通过使用data-valmsg-summary="true" 标记容器并在其中放置<ul> 来控制该容器）。

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

【讨论】：