Bootstrap中表單控件狀態(tài)(驗證狀態(tài))
更新時間：2016年08月04日 14:28:02 作者：詩閔
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗證狀態(tài)) 的相關資料,還給大家介紹了在Bootstrap框架中提供的機制驗證效果，非常不錯，需要的朋友可以參考下
在制作表單時，難免要做表單驗證。同樣也需要提供驗證狀態(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)會提供不同的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="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告狀態(tài)</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">錯誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
運行效果如下或查看右側結果窗口：
從效果圖中可以看出，圖標都居右。在Bootstrap的小圖標都是使用@font-face來制作（后面的內容中將會著重用一節(jié)內容來介紹）。而且必須在表單中添加了一個span元素：
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
以上所述是小編給大家介紹的Bootstrap中表單控件狀態(tài)(驗證狀態(tài)) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
javascritp添加url參數方法，將參數加入到url中,如果原來url中有則覆蓋，下面是示例代碼，感興趣的朋友可以參考下2014-09-09
這篇文章主要介紹了javascript實現(xiàn)的固定位置懸浮窗口,以一個完整實例形式詳細分析了javascript實現(xiàn)固定位置懸浮窗口的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
2009-04-04
近期月報里提到了valueOf方法,興致來了翻了下ECMA5里關于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊2013-02-02
本文為大家詳細介紹下使用JS添加千分位以及去掉千分位的實現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要介紹了JS實現(xiàn)的簡單輪播圖運動效果,結合完整實例形式分析了javascript基于定時器動態(tài)修改頁面元素屬性的相關操作技巧,需要的朋友可以參考下2016-12-12
仿淘寶網的最近瀏覽記錄功能，喜歡的朋友可以參考下。2010-07-07
這篇文章主要介紹了Js之如何移除Array/數組中指定元素問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了JavaScript對象引用與賦值,結合實例形式分析了JavaScript對象引用及賦值的操作技巧與相關注意事項,需要的朋友可以參考下2017-03-03
基于javascript實現(xiàn)按圓形排列DIV元素(一)
本篇文章主要介紹基于javascript實現(xiàn)按圓形排列DIV元素的方法，此文著重于介紹對實現(xiàn)的按圓形排列DIV元素的分析，需要的朋友來看下吧2016-12-12