淺談bootstrap表單驗證外掛BootstrapValidator

本篇推薦一款twitter做的BootstrapValidator，本身Bootstrap就是twitter做的，那麼使用原配的validator也就更值得信賴。從百度上搜BootstrapValidator會出現很多款，但我只推薦這款（突然感覺自己有點“庫【Steve 庫裡】吹”的感覺）。

相關教程推薦：《bootstrap教程》



###一、一睹為快

為了簡便的介紹，這裡只做為空的check。

BootstrapValidator官方下載地址

###二、資源引用

下載完資源包後，你可以看到如下的目錄。


然後把以下三個檔案引入到你專案。

1

2

3







###三、會員名稱不為空專案配置

1

2

3

4

5

6

7

8

9



    

        

            賬戶

            <input class="form-control" type="text" autofocus="" name="username" placeholder="請輸入會員編號" autocomplete="off" 
                data-bv-notempty />

        

    

data-bv-notempty表示該會員編號要做為空check。

form-group的p是必須的，否則會報“too much recursion”錯誤。

form表單提交的時候會執行validateCallback方法，該方法在第五步中具體介紹。

###四、頁面載入完成後啟用bootstrap validator

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(function() {

    // validate form

    $("form.required-validate").each(function() {

        var $form = $(this);

        $form.bootstrapValidator();

         

        // 修復bootstrap validator重複向服務端提交bug

        $form.on('success.form.bv', function(e) {

            // Prevent form submission

            e.preventDefault();

        });

         

         

    });

});

在form表單上加上‘class=“required-validate”’屬性，然後通過jquery獲取對應form表單，對其執行預設的bootstrapValidator載入。

一定要注意上面程式碼中註釋部分程式碼，具體介紹可參照修復BootstrapValidator重複提交的bug。

###五、form表單提交時驗證專案

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

function validateCallback(form, callback, confirmMsg) {

    YUNM.debug("進入到form表單驗證和提交");

 

    var $form = $(form);

 

    var data = $form.data('bootstrapValidator');

    if (data) {

    // 修復記憶的元件不驗證

        data.validate();

         

        if (!data.isValid()) {

            return false;

        }

    }

 

     

    $.ajax({

        type : form.method || 'POST',

        url : $form.attr("action"),

        data : $form.serializeArray(),

        dataType : "json",

        cache : false,

        success : callback || YUNM.ajaxDone,

        error : YUNM.ajaxError  });

 

    return false;}

validateCallback中獲取form表單後，通過isValid方法可以返回表單驗證是否通過。

當表單驗證通過後，再通過ajax將表單提交到服務端。