基於BootstrapValidator的資料驗證

標籤：紅色   title   one   tst   開發   前端   markdown   src   項目   

做web開發，經常需要使用到表單驗證，作者本人一開始也是自己寫各種驗證，最近接觸到BootstrapValidator，覺得非常好用，介面友好，使用方便，與Bootstrap完美相容，堪稱前端資料驗證神器。
那麼，今天，我們就來瞭解一下如何使用BootstrapValidator做表單驗證吧！
首先，使用BootstrapValidator需要從GitHub的BootstrapValidator項目頁下載檔案包。

樣式表(css)檔案：
bootstrap.min.css
bootstrapValidator.min.css
js指令檔:
jquery-1.10.2.min.js
bootstrap.min.js

登入介面如下：

登入介面代碼如下：

PS: 作者使用了Botstrap架構來寫介面，如果你對Bootstrap架構不是很熟悉，那麼你可以閱讀作者之前寫過的文章【Web前端架構學習—Bootstrap】 來瞭解Bootstrap。

匯入BootstrapValidator的css檔案、js檔案後，就需要自己寫一段jQuery指令碼進行資料驗證。下面是作者寫的一個簡單的jQuery資料驗證指令碼，可參照文檔注釋閱讀。

加了驗證之後，我們來看：
這裡作者把使用者名稱設定成使用email替代，輸入錯誤的郵箱地址，資料驗證不通過，css控制輸入框顯示為紅色，不可以點擊登入按鈕。

輸入正確的郵箱地址，輸入錯誤的密碼後，資料驗證不通過，css控制輸入框顯示為紅色，不可以點擊登入按鈕。

當使用者名稱、密碼全部輸入正確後，資料驗證通過，css控制輸入框顯示為綠色，可以點擊登入按鈕。

互連網時代，讓學習變得更加方便，各種資料觸手可得。
1. BootstrapValidator在GitHub的首頁
2. 基於jquery，bootstrap資料驗證外掛程式bootstrapValidator 教程
3. JS組件系列——Form表單驗證神器： BootstrapValidator

基於BootstrapValidator的資料驗證