使用 Bootstrap 設置數據驗證錯誤的樣式

我正在開發一個 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”屬性？

如Bootstrap 的文件中所示，您需要將 classhas-error應用於包含輸入並具有 class 的 div form-group：

<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，它需要付費許可證。

引用自：https://stackoverflow.com/questions/19820467