Bootstrap中表單控件狀態(tài)(驗證狀態(tài))
在制作表單時，難免要做表單驗證。同樣也需要提供驗證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時候只需要在form-group容器上對應(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">錯誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)"> </div> </form>
運行效果如下或查看右側(cè)結(jié)果窗口：
很多時候，在表單驗證的時候，不同的狀態(tài)會提供不同的icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應(yīng)的狀態(tài)下顯示icon出來，只需要在對應(yīng)的狀態(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>
運行效果如下或查看右側(cè)結(jié)果窗口：
從效果圖中可以看出，圖標(biāo)都居右。在Bootstrap的小圖標(biāo)都是使用@font-face來制作（后面的內(nèi)容中將會著重用一節(jié)內(nèi)容來介紹）。而且必須在表單中添加了一個span元素：
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
以上所述是小編給大家介紹的Bootstrap中表單控件狀態(tài)(驗證狀態(tài)) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
TypeScript中定義變量方式以及數(shù)據(jù)類型詳解
TypeScript支持 JavaScript的所有語法和語義,同時通過作為ECMAScript的超集來提供一些額外的功能,如類型檢測和更豐富的語法,這篇文章主要給大家介紹了關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類型詳解的相關(guān)資料,需要的朋友可以參考下2022-08-08
分享XmlHttpRequest調(diào)用Webservice的一點心得
因為項目需要，以后前端、手機客戶端調(diào)用ASP.NET的Webservice來獲取信息.所以這段時間開始看Webservice，試著通過XmlHttpRequest調(diào)用Webservice，過程中碰到不少問題，也有不少的收獲2012-07-07
微信企業(yè)號開發(fā)之微信考勤Cookies的使用
使用微信考勤，每次使用微信企業(yè)號開發(fā):微信用戶信息和web網(wǎng)頁的session的關(guān)系這個里邊的方法，調(diào)用微信的接口，有點慢，微信官方也推薦使用Cookies，但如何使用Cookies，自己卻一直沒有搞清楚。下面小編幫大家解決難題，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了select自定義小三角樣式，通過css HTML js 代碼詳細(xì)展示了操作過程，自定義小三角樣式，也可以做出select文字居中的效果,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
什么是cookie?js手動創(chuàng)建和存儲cookie
cookie 是存儲于訪問者的計算機中的變量，在這個例子中我們要創(chuàng)建一個存儲訪問者名字的 cookie,需要的朋友可以參考下2014-05-05
javascript用函數(shù)實現(xiàn)對象的方法
這篇文章主要介紹了javascript用函數(shù)實現(xiàn)對象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05
結(jié)合ES6?編寫?JavaScript?設(shè)計模式中的結(jié)構(gòu)型模式
這篇文章主要介紹了結(jié)合ES6編寫JavaScript?設(shè)計模式中的結(jié)構(gòu)型模式，設(shè)計模式是軟件設(shè)計中常見問題的解決方案，這些模式很容易重復(fù)使用并且富有表現(xiàn)力2022-07-07
這篇文章主要介紹了微信小程序頁面滾動到指定位置代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09