一 :bootstrapValidator引入

在使用bootstrapValidator前我們需要引入bootstrap和bootstrapValidator對應的js和css檔案。

    <!--jquery-->
 <script type="text/javascript" src="Public/js/jquery-3.2.1.js"></script>

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

二：繫結驗證的js程式碼

<form class="form-horizontal center-block" id="form_test">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="des">使用者名稱</label>
            <div class="col-xs-4">
                <input type="text"
 
  class="form-control" name="username" id="username" placeholder="username">
            </div>
        </div>

        <div class="form-group ">
            <label class=" control-label col-sm-2" ></label>
            <div class="col-xs-4">
                <button type="submit" class="btn btn-primary">提 交</button>
                <button type="reset" class="btn btn-default">清 空</button>
            </div>
        </div>
    </form>
  $(document).ready(function() {
        $('#form_test').bootstrapValidator({
            message: 'This value is not valid',
            //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的預設配置
            excluded: ':disabled',//關鍵配置，表示只對于禁用域不進行驗證，其他的表單元素都要驗證

            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',//顯示驗證成功或者失敗時的一個小圖示
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '使用者名稱不能為空',//預設提示資訊
                    validators: {
                        notEmpty: {
                            message: '使用者名稱必填不能為空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '使用者名稱長度不能小於6位或超過30位'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '使用者名稱只能由字母、數字、點和下劃線組成。'
                        },

                    }
                }

            }
        }).on('error.form.bv', function(e) {
            console.log('error');

            // Active the panel element containing the first invalid element
            var $form         = $(e.target),
                validator     = $form.data('bootstrapValidator'),
                $invalidField = validator.getInvalidFields().eq(0),
                $collapse     = $invalidField.parents('.collapse');

            $collapse.collapse('show');
        });
    });

三.在validators中一些驗證規則的總結

1.判斷欄位是否為空

 notEmpty: {
          message: '使用者名稱必填不能為空'
            },

2.欄位長度判斷

stringLength: {
          min: 6,
          max: 30,
          message: '使用者名稱長度不能小於6位或超過30位'
          },

3.通過正則表示式進行驗證

regexp: {
          regexp: /^[A-Z\s]+$/i,
          message: '名字只能由字母字元和空格組成。'
                    }

4.大小寫驗證

stringCase: {
          message: '姓氏必須只包含大寫字元。',
          case: 'upper'//其他值或不填表示只能小寫字元
                    },

5.兩個欄位不相同的判斷

different: {
          field: 'password',
          message: '使用者名稱和密碼不能相同。'
                    }

6.email驗證

emailAddress: {
         message: 'The input is not a valid email address'
                   }

7.日期格式驗證

date: {
         format: 'YYYY/MM/DD',
         message: '日期無效'
                    }

8.純數字驗證

 digits: {
         message: '該值只能包含數字。'
                    }

9.ajax驗證

threshold :  6 , //有6字元以上才傳送ajax請求，（input中輸入一個字元，外掛會向伺服器傳送一次，設定限制，6字元以上才開始）
remote: {//ajax驗證。server result:{"valid",true or false} 向服務傳送當前input name值，獲得一個json資料。例表示正確：{"valid",true}  
    url: 'exist2.do',//驗證地址
    message: '使用者已存在',//提示訊息
    delay :  2000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定2秒傳送一次ajax（預設輸入一個字元，提交一次，伺服器壓力太大）
    type: 'POST'//請求方式

                     },

10.複選框驗證

choice: {
                        min: 2,
                        max: 4,
                        message: '請選擇2-4項'
                    }

11.密碼確認

identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },

12.判斷輸入數字是否符合大於18小於100

greaterThan: {
                        value: 18
                    },
lessThan: {
                        value: 100
                    }

13.uri驗證

 uri: {}