Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 571

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

$
0
0

bootstrap-validator-Bootstrap 表單驗證外掛 Validator,美觀輕鬆好上手
網頁表單在送出前,所有欄位都需進行防呆或驗證資料格式。如果每次製作不同的表單,都要重新寫一次 JS 來處理這些事,還挺麻煩的。

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

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



一、Bootstrap Validator


1. 簡介


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

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

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

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

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

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


2. 功能

bootstrap-validator-1-Bootstrap 表單驗證外掛 Validator,美觀輕鬆好上手

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

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



二、基本安裝方式


1. CDN 連結


所有的外掛版本、連結,請參照以上 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 相關文章:

Viewing all articles
Browse latest Browse all 571

Trending Articles