在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時候只需要在form-group容器上對應添加狀態(tài)類名。
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功狀態(tài)</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告狀態(tài)</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">錯誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)"> </div> </form>
運行效果如下或查看右側結果窗口：
從效果可以看出，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而以。
其他兩種狀態(tài)省略源碼不在此展示。
很多時候，在表單驗證的時候，不同的狀態(tài)會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態(tài)下顯示 icon 出來，只需要在對應的狀態(tài)下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態(tài)</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> ...... </div> <div class="form-group has-error has-feedback"> ...... </div> </form>
運行效果如下或查看右側結果窗口：
從效果圖中可以看出，圖標都居右。在 Bootstrap 的小圖標都是使用@font-face來制作（后面的內(nèi)容中將會著重用一節(jié)內(nèi)容來介紹）。而且必須在表單中添加了一個 span 元素：
<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
我來試試：
摹似編寫一個郵箱地址輸入框輸錯地址后的效果，如下圖：
(備注:這一小節(jié)沒有正確性驗證，請查看結果窗口與教案所給的結果圖片是否一致，從而判斷輸
入代碼是否正確。)
參考代碼：
<div class="form-group has-error has-feedback">
<label class="control-label" for="email">email地址</label>
<input type="text" class="form-control" id="email" placeholder="在這里輸入你的email地址">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報