Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
在制作表單時(shí)，難免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯(cuò)誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(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">錯(cuò)誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)"> </div> </form>
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：
很多時(shí)候，在表單驗(yàn)證的時(shí)候，不同的狀態(tài)會(huì)提供不同的icon，比如成功是一個(gè)對(duì)號(hào)（√），錯(cuò)誤是一個(gè)叉號(hào)（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對(duì)應(yīng)的狀態(tài)下顯示icon出來(lái)，只需要在對(duì)應(yīng)的狀態(tài)下添加類名“has-feedback”。請(qǐng)注意，此類名要與“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">錯(cuò)誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：
從效果圖中可以看出，圖標(biāo)都居右。在Bootstrap的小圖標(biāo)都是使用@font-face來(lái)制作（后面的內(nèi)容中將會(huì)著重用一節(jié)內(nèi)容來(lái)介紹）。而且必須在表單中添加了一個(gè)span元素：
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
以上所述是小編給大家介紹的Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascritp添加url參數(shù)將參數(shù)加入到url中
javascritp添加url參數(shù)方法，將參數(shù)加入到url中,如果原來(lái)url中有則覆蓋，下面是示例代碼，感興趣的朋友可以參考下2014-09-09
javascript實(shí)現(xiàn)的固定位置懸浮窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的固定位置懸浮窗口,以一個(gè)完整實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
2009-04-04
近期月報(bào)里提到了valueOf方法,興致來(lái)了翻了下ECMA5里關(guān)于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊2013-02-02
本文為大家詳細(xì)介紹下使用JS添加千分位以及去掉千分位的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖運(yùn)動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
使用Cookies保存網(wǎng)站歷史瀏覽記錄實(shí)例代碼
仿淘寶網(wǎng)的最近瀏覽記錄功能，喜歡的朋友可以參考下。2010-07-07
這篇文章主要介紹了Js之如何移除Array/數(shù)組中指定元素問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
JavaScript對(duì)象引用與賦值實(shí)例詳解
這篇文章主要介紹了JavaScript對(duì)象引用與賦值,結(jié)合實(shí)例形式分析了JavaScript對(duì)象引用及賦值的操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法，此文著重于介紹對(duì)實(shí)現(xiàn)的按圓形排列DIV元素的分析，需要的朋友來(lái)看下吧2016-12-12