asp.net-mvc-4 - 使用 Bootstrap 设置数据验证错误样式

Question

我正在开发一个 ASP.NET MVC 4 项目。我想使用 Bootstrap 3.0 在我的登录页面上设置数据验证错误的样式。当我调试页面并给出数据验证错误时，此代码在我的登录表单的源中消失:

 <form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div>    <div class="form-group control-group">
   <div class="col-md-6 col-md-offset-3">
                <input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
                <span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
       </div>
        </div>
    <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
                <input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
                <span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
        </div>
    </div>
    <div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <button class="btn btn-default" type="submit">Giriş Yap</button>
        </div>
    </div>
</form>

如何使用 Bootstrap 3 设置这些错误的样式，例如标签的“for=inputError”属性？

Answer 1

如Bootstrap's docs所示，您需要将类 has-error 应用于包含输入且具有类 form-group 的 div:

<div class="form-group has-error">
    ...
</div>

为要检查的每个属性编写一个条件并根据该条件的结果应用类 has-error 是相当难看的，尽管您可以这样做:

<div class="form-group @(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">

这负责服务器端验证。但是，您还需要考虑客户端验证。为此，您需要编写一些 jQuery 来检查类 field-validation-error 是否存在，并根据结果应用类 has-error。

您可以自己完成这一切，但我建议查看 TwitterBootstrapMVC它会自动为您完成所有这些工作。您只需编写以下内容:

@Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)

免责声明:我是 TwitterBootstrapMVC 的作者。在 Bootstrap 2 中使用它是免费的。对于 Bootstrap 3，它需要付费许可证。