在進行web開發的時候，表單驗證是常見的操作，友好的提示可以提高使用者的使用體驗，我嘗試使用了一下BootstrapValidator進行表單驗證，將使用過程和遇到的問題記錄如下。

一、Github地址

地址

二、用法

1、引入

<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrapValidator.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js" type="text/javascript"></script>
 

需要注意的是已經將要使用到的檔案下載到了本地。

2、使用

既然是表單驗證，那麼我們在html程式碼內必須有一個form，並且Form裡面取元素都是通過name屬性去取值的，所以，表單裡面的元素都要有一個name的屬性值。
HTML程式碼

<form id="register-form">
      <div class="form-group">
          <input id="register-username" type="text" class="form-control" placeholder="請輸入使用者名稱/姓名" name="username">
       </div>
      <div class="form-group">
          <input id="register-password" type="password" class="form-control" placeholder="請輸入密碼" name="password">
      </div>

      <div class="form-group">
          <button class="btn btn-primary btn-lg " type="submit" >登入</button>
      </div>

      <div class="pull-right control">
           <input type="checkbox">
           <label class="control">自動登入</label>
      </div>

      <div class="pull-right control">
           <input type="checkbox">
           <label class="control">記住密碼</label>
      </div>
</form>
 

js程式碼

$(function () {
                $('#register-form').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        username: {
                            message: '使用者名稱驗證失敗',
                            validators: {
                                notEmpty: {
                                    message: '使用者名稱不能為空'
                                }
                            }
                        },
                        password:{
                            validators:{
                                notEmpty:{
                                    message:'密碼不能為空'
                                },
                            }
                        }
                    }
                });
        });
 

如果需要新增其他的驗證，比如限制使用者名稱長度，正則表示式，兩次輸入的密碼是否一致等等，需要的js程式碼如下

$(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '使用者名稱驗證失敗',
                    validators: {
                        notEmpty: {
                            message: '使用者名稱不能為空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '使用者名稱長度必須在6到18位之間'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '使用者名稱只能包含大寫、小寫、數字和下劃線'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '郵箱不能為空'
                        },
                        emailAddress: {
                            message: '郵箱地址格式有誤'
                        }
                    }
                }
            }
        });
    });

其他的還有很多，詳見github倉庫內的demo

3、遇到的問題

1、驗證沒有效果
原因分析：可能是匯入的檔案不一致的問題，在根據提供的demo裡面的檔案重新匯入css、js檔案之後，可以正常的驗證了，建議根據裡面的檔案匯入，否則不會顯示效果
2、圖示不顯示
原因分析：ctrl+滑鼠左鍵點選引入的<link href="css/bootstrap.css" rel="stylesheet">發現沒有fonts資料夾，從demo裡面複製一份到專案資料夾下即可。