Bootstrap 表單驗證外掛 Validator，美觀輕鬆好上手

網頁表單在送出前，所有欄位都需進行防呆或驗證資料格式。如果每次製作不同的表單，都要重新寫一次 JS 來處理這些事，還挺麻煩的。

大致找了一下，「驗證表單」功能的外掛還不少，而且功能也很強。不過各個官網逛過一圈後，幾乎都被我刷掉了，要嘛功能太多、說明書太複雜，要嘛官網無法立即看到 DEMO 效果，學習起來會很花時間。

最後比較中意的這個還滿特別的，是基於 Bootstrap 所開發的外掛 Validator，以下會說明雀屏中選的原因。

一、Bootstrap Validator

1. 簡介

• 官網：http://1000hz.github.io/bootstrap-validator/

雖然這不是最強大的「表單驗證」外掛，但我認為它的 CP 值比較高，因為：

1. 官網的設計有從使用者角度出發，一進入網頁就看到 DEMO 效果，重要選單也做成浮動功能，排版清楚，適合快速上手及學習。

2. API 功能沒有非常多，但重要、常見的功能都有，這樣說明書找起來也不會太花時間。

3. 雖然需要先安裝「Bootstrap」，不過 Bootstrap 已經是非常知名、多數網頁都會使用的框架，而且做出來的表單也比較美觀，因此我認為比其他外掛值得採用。

4. 這個外掛有 CDN 支援，因此不用另外尋找網頁空間。

5. 其他外掛需要用 js 設定複雜的參數，這個外掛幾乎不需用 js 設定，不必學習 js 語法，多數常用的設定用 HTML 就可搞定，相對之下單純許多。


2. 功能



上圖是這個外掛的表單驗證效果，大致有這些優點：

• 紅圓圈處的打叉圖案，是 Bootstrap 預設的圖示，驗證失敗時可顯示此效果。
• 這個外掛的神奇之處，在於某些驗證失敗的字串，可自動顯示對應語系的文字。例如圖中的 "請填寫這個欄位"，這是未設定過就顯示的預設中文字串。
• 每個欄位可自行設定各種驗證失敗的字串。
• 「輸入密碼」的下一欄，通常會設計「確認密碼」的欄位，這個外掛預設就有比對密碼字串的功能。
• 所有必要欄位尚未填寫、勾選之前，圖中紅框處的「提交按鈕」(Submit)是不能按的，這是少見的防呆好設計。

二、基本安裝方式

1. CDN 連結

• https://cdnjs.com/libraries/1000hz-bootstrap-validator

所有的外掛版本、連結，請參照以上 CDN 網址。

網頁記得先引用 jQuery 以及 Bootstrap 的 CSS 連結。


2. 基本安裝

以下是安裝範例：

<!--引用 jQuery + Bootstrap-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>

<!--表單內容-->
<form id="myForm" role="form" data-toggle="validator">
...
</form>

<!--引用 Validator-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>

<!--執行 Validator-->
<script>
$("#myForm").validator();
</script>
官網表示有兩種方式可啟動驗證表單程式：

• 為 form 標籤加上 data-toggle="validator" 屬性即可
• 或者是為 form 設定 ID(例如 myForm)，接者用 js 執行 $("#myForm").validator();

三、使用說明

以下說明製作表單 FORM 標籤時的注意事項，多數設定只要寫好 HTML 就能看到效果。

1. 表單 HTML

需要驗證的 Input 輸入欄位，支援以下屬性：

• type="email"
• type="url"
• type="number" (可另外設定位數)
• text, search, tel, url, email 這幾種形式，可設定 Regex 正規表示式
• required

2. 顯示錯誤訊息

當驗證失敗時，需要有一個區塊顯示錯誤訊息。此區塊的製作要點如下：

• 必須放在 .form-group 的容器之間，請參考「Bootstrap」的說明書內容，瞭解什麼是 form-group。
• 建議放在 Input 標籤的後一行
• 要放在 Input 前一行當然也可以，但錯誤訊息出現在前面怪怪的

此區塊的完整 HTML 碼如下：

<div class="help-block with-errors"></div>


3. 其他常見功能

A. 確認密碼：

原本輸入密碼的 Input 欄位，請設定 ID(例如 inputPW)，需要使用者重複輸入確認密碼的 Input 欄位，請設定屬性：

data-match="#inputPW"

同時這個 Input 欄位可設定顯示錯誤訊息：

data-match-error="糟了！密碼並未吻合，請重新輸入~"

B. 限制字數：

例如 Input 密碼欄位希望至少輸入 6 個字元的話，可以設定屬性：

data-minlength="6"

C. 使用正規表示式：

例如希望密碼只能使用英(或)數、最少 6 位數，可這樣設定：

pattern="^[a-zA-Z0-9]{6,}$"

那麼密碼不符合規定時就會顯示錯誤訊息。而想設定此時的錯誤訊息，方式如下：

data-pattern-error="請輸入英、數組合的密碼至少 6 個位元"

D. 預設錯誤訊息：

想要改寫系統預設的錯誤訊息，設定方式如下：

data-error="請填寫此欄位"

四、完整範例

以下是一個簡單的完整範例，所有 HTML 部分的語法、參數，上面都有說明：

<!--引用 jQuery + Bootstrap-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>

<!--表單內容-->
<form id="register_form" role="form" data-toggle="validator">
<div class="form-group">
<input id="inputName" name="Name" type="text" class="form-control" placeholder="姓名" required="required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="inputEmail" name="Email" class="form-control" type="email" placeholder="電子郵件地址" data-error="郵件格式錯誤" required="required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="inputPassword" name="Password" class="form-control" type="password" placeholder="設定密碼" pattern="^(?=.*\d)(?=.*[a-zA-Z]).{6,}$" data-error="請輸入含有英文字母及數字的密碼，至少六個字元。" required="required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="inputConfirmPassword" name="ConfirmPassword" class="form-control" type="password" placeholder="確認密碼" data-match="#inputPassword" data-error="密碼未吻合！" required="required">
<div class="help-block with-errors"></div>
</div>
<input type="submit" value="註冊" class="btn btn-danger btn-block" />
</form>

<!--引用 Validator-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>

<!--執行 Validator-->
<script>
$('#register_form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) { // 未驗證通過 則不處理
return;
} else { // 通过后，送出表单
alert("已送出表單");
}
e.preventDefault(); // 防止原始 form 提交表单
});
</script>

執行效果如同以下的表單，可自行輸入、測試各種錯誤狀態。所有欄位都填寫正確後，才能送出表單：

更多 Bootstrap 相關文章：

更多 jQuery 相關文章：