前言:做Web開發的我們,表單驗證是再常見不過的需求了。友好的錯誤提示能增加使用者體驗。部落客搜尋bootstrap表單驗證,搜到的結果大部分都是文中的主題:bootstrapvalidator。今天就來看看它如何使用吧。
介紹它之前,還是給出它的源碼以及API的位址吧。
bootstrapvalidator源碼:https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api:http://bv.doc.javake.cn/api/
來看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。從描述中我們就可以知道它至少需要jQuery、bootstrap的支援。我們首先引入需要的js元件
我們知道,既然是表單驗證,那麼我們在cshtml頁面就必須要有一個Form,并且我們知道Form裡面取元素都是通過name屬性去取值的,是以,表單裡面的元素都要有一個name的屬性值。
有了表單元素之後,就是我們的js初始化了。
内容應該很容易看懂。來看效果:
驗證通不過,送出按鈕灰掉不能點選

驗證通過,送出按鈕恢複
看看效果先感受下,最大優點:使用簡單,界面友好。下面我們來看看重疊驗證。
上面我們知道了非空驗證的寫法,除此之外肯定還有其他驗證方式啊。别急,我們慢慢來看。上面的代碼cshtml部分不動,js部分我們稍作修改:
加上了重疊驗證我們來看效果:
由上面的代碼可以看出在validators屬性對應一個Json對象,裡面可以包含多個驗證的類型:
notEmpty:非空驗證;
stringLength:字元串長度驗證;
regexp:正規表達式驗證;
emailAddress:郵箱位址驗證(都不用我們去寫郵箱的正則了~~)
除此之外,在文檔裡面我們看到它總共有46個驗證類型,我們抽幾個常見的出來看看:
base64:64位編碼驗證;
between:驗證輸入值必須在某一個範圍值以内,比如大于10小于100;
creditCard:身份證驗證;
date:日期驗證;
ip:IP位址驗證;
numeric:數值驗證;
phone:電話号碼驗證;
uri:url驗證;
更多驗證類型詳見:http://bv.doc.javake.cn/validators/。當然涉及中文的驗證可能會有些小問題,園友們如果有需要可以自行下去用代碼測試下。
還有一個比較常用的就是submitHandler屬性,它對應着送出按鈕的事件方法。使用如下:
在它的Demo裡面介紹了很多驗證的執行個體。我們簡單看看它的效果,至于實作代碼,其實很簡單,有興趣的可以直接看api。
顔色驗證
Tab頁表單驗證
按鈕驗證