Bootstrap 表單效驗(yàn)狀態(tài)

Bootstrap 對(duì)表單控件的校驗(yàn)狀態(tài)，如 error、warning 和 success 狀態(tài)，都定義了樣式。
使用時(shí)，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。
任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。


Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class（.has-warning、 .has-error 或 .has-success）即可使用驗(yàn)證狀態(tài)。

下面的實(shí)例演示了所有控件狀態(tài)：

<div class="form-group has-success"> 
  <label class="control-label" for="inputSuccess1">Input with success</label> 
  <input type="text" class="form-control" id="inputSuccess1"> 
</div> 
<div class="form-group has-warning"> 
  <label class="control-label" for="inputWarning1">Input with warning</label> 
  <input type="text" class="form-control" id="inputWarning1"> 
</div> 
<div class="form-group has-error"> 
  <label class="control-label" for="inputError1">Input with error</label> 
  <input type="text" class="form-control" id="inputError1"> 
</div> 
<div class="has-success"> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox" id="checkboxSuccess" value="option1"> 
      Checkbox with success 
    </label> 
  </div> 
</div> 
<div class="has-warning"> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox" id="checkboxWarning" value="option1"> 
      Checkbox with warning 
    </label> 
  </div> 
</div> 
<div class="has-error"> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox" id="checkboxError" value="option1"> 
      Checkbox with error 
    </label> 
  </div> 
</div> 

添加額外的圖標(biāo)

你還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可。

Feedback icons only work with textual <input class="form-control"> elements.

圖標(biāo)、label 和輸入控件組

對(duì)于不帶有 label 標(biāo)簽的輸入框以及右側(cè)帶有附加組件的輸入框組，需要手動(dòng)為其圖標(biāo)定位。為了讓所有用戶都能訪問(wèn)你的網(wǎng)站，我們強(qiáng)烈建議為所有輸入框添加 label 標(biāo)簽。如果你不希望將 label 標(biāo)簽展示出來(lái)，可以通過(guò)添加 sr-only 類來(lái)實(shí)現(xiàn)。如果的確不能添加 label 標(biāo)簽，請(qǐng)調(diào)整圖標(biāo)的 top 值。對(duì)于輸入框組，請(qǐng)根據(jù)你的實(shí)際情況調(diào)整 right 值。

<div class="form-group has-success has-feedback"> 
  <label class="control-label" for="inputSuccess2">Input with success</label> 
  <input type="text" class="form-control" id="inputSuccess2"> 
  <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
</div> 
<div class="form-group has-warning has-feedback"> 
  <label class="control-label" for="inputWarning2">Input with warning</label> 
  <input type="text" class="form-control" id="inputWarning2"> 
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> 
</div> 
<div class="form-group has-error has-feedback"> 
  <label class="control-label" for="inputError2">Input with error</label> 
  <input type="text" class="form-control" id="inputError2"> 
  <span class="glyphicon glyphicon-remove form-control-feedback"></span> 

為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)

<form class="form-horizontal" role="form"> 
  <div class="form-group has-success has-feedback"> 
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label> 
    <div class="col-sm-9"> 
      <input type="text" class="form-control" id="inputSuccess3"> 
      <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
    </div> 
  </div> 
</form> 

<form class="form-inline" role="form"> 
  <div class="form-group has-success has-feedback"> 
    <label class="control-label" for="inputSuccess4">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess4"> 
    <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
  </div> 
</form> 

可選的圖標(biāo)與設(shè)置 .sr-only 類的 label

通過(guò)為 label 元素添加 .sr-only 類，可以讓表單控件的 label 元素不可見(jiàn)。在這種情況下，Bootstrap 將自動(dòng)調(diào)整圖標(biāo)的位置。

<div class="form-group has-success has-feedback"> 
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> 
  <input type="text" class="form-control" id="inputSuccess5"> 
  <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
</div>