bootstrapValidator 表單驗證

騷裡騷氣1發表於2018-07-25
boot

 

一、引入必要檔案

下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/

一、引入必要檔案

下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
// 帶眾多常用預設驗證規則的
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script>
// 不帶常用規則，需自定義規則
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
//此方法是我編寫常用的自定義規則的，也可直接寫到對應的表單的js中
<script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

二、編寫HTML

在表單中，若對某一欄位想新增驗證規則，預設需要以<div class=”form-group”></div>包裹（對應錯誤提示會根據該class值定位），內部<input class="form-control" />標籤必須有name屬性值，此值為驗證匹配欄位。

注：該值不是絕對的，也可以通過js手動指定錯誤提示位置和驗證的輸入框（後續會講解到）。

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email address</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

 

三、新增驗證規則

1、新增到HTML上

<div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="username"
            data-bv-message="The username is not valid"

            required
            data-bv-notempty-message="The username is required and cannot be empty"

            pattern="[a-zA-Z0-9]+"
            data-bv-regexp-message="The username can only consist of alphabetical, number" />
    </div>
</div>

 

 

 

2、新增到js上

注：以下引數上面的賦值都為預設值，不新增該引數即使用預設值

$(formSelector).bootstrapValidator({
    /**
    *  指定不驗證的情況
    *  值可設定為以下三種型別：
    *  1、String  `:disabled, :hidden, :not(:visible)`
    *  2、Array  預設值  [`:disabled`, `:hidden`, `:not(:visible)`]
    *  3、帶回撥函式  
        [`:disabled`, `:hidden`, function($field, validator) {
            // $field 當前驗證欄位dom節點
            // validator 驗證例項物件 
            // 可以再次自定義不要驗證的規則
            // 必須要return，return true or false; 
            return !$field.is(`:visible`);
        }]
    */
    excluded: [`:disabled`, `:hidden`, `:not(:visible)`],
    /**
    * 指定驗證後驗證欄位的提示字型圖示。（預設是bootstrap風格）
    * Bootstrap 版本 >= 3.1.0
    * 也可以使用任何自定義風格，只要引入好相關的字型檔案即可
    * 預設樣式 
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: 15px;
        }
    * 自定義該樣式覆蓋預設樣式
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: -15px;
        }
        .form-horizontal .has-feedback .input-group .form-control-feedback {
            top: 0;
            right: -30px;
        }
    */
    feedbackIcons: {
        valid: `glyphicon glyphicon-ok`,
        invalid: `glyphicon glyphicon-remove`,
        validating: `glyphicon glyphicon-refresh`
    },
    /**
    * 生效規則（三選一）
    * enabled 欄位值有變化就觸發驗證
    * disabled,submitted 當點選提交時驗證並展示錯誤資訊
    */
    live: `enabled`,
    /**
    * 為每個欄位指定通用錯誤提示語
    */
    message: `This value is not valid`,
    /**
    * 指定提交的按鈕，例如：`.submitBtn` `#submitBtn`
    * 當表單驗證不通過時，該按鈕為disabled
    */
    submitButtons: `button[type="submit"]`,
    /**
    * submitHandler: function(validator, form, submitButton) {
    *   //validator: 表單驗證例項物件
    *   //form  jq物件  指定表單物件
    *   //submitButton  jq物件  指定提交按鈕的物件
    * }
    * 在ajax提交表單時很實用
    *   submitHandler: function(validator, form, submitButton) {
            // 實用ajax提交表單
            $.post(form.attr(`action`), form.serialize(), function(result) {
                // .自定義回撥邏輯
            }, `json`);
         }
    * 
    */
    submitHandler: null,
    /**
    * 為每個欄位設定統一觸發驗證方式（也可在fields中為每個欄位單獨定義），預設是live配置的方式，資料改變就改變
    * 也可以指定一個或多個（多個空格隔開） `focus blur keyup`
    */
    trigger: null,
    /**
    * Number型別  為每個欄位設定統一的開始驗證情況，當輸入字元大於等於設定的數值後才實時觸發驗證
    */
    threshold: null,
    /**
    * 表單域配置
    */
    fields: {
        //多個重複
        <fieldName>: {
            //隱藏或顯示 該欄位的驗證
            enabled: true,
            //錯誤提示資訊
            message: `This value is not valid`,
            /**
            * 定義錯誤提示位置  值為CSS選擇器設定方式
            * 例如：`#firstNameMeg` `.lastNameMeg` `[data-stripe="exp-month"]`
            */
            container: null,
            /**
            * 定義驗證的節點，CSS選擇器設定方式，可不必須是name值。
            * 若是id，class, name屬性，<fieldName>為該屬性值
            * 若是其他屬性值且有中劃線連結，<fieldName>轉換為駝峰格式  selector: `[data-stripe="exp-month"]` =>  expMonth
            */
            selector: null,
            /**
            * 定義觸發驗證方式（也可在fields中為每個欄位單獨定義），預設是live配置的方式，資料改變就改變
            * 也可以指定一個或多個（多個空格隔開） `focus blur keyup`
            */
            trigger: null,
            // 定義每個驗證規則
            validators: {
                //多個重複
                //官方預設驗證參照  http://bv.doc.javake.cn/validators/
                // 注：使用預設前提是引入了bootstrapValidator-all.js
                // 若引入bootstrapValidator.js沒有提供常用驗證規則，需自定義驗證規則哦
                <validatorName>: <validatorOptions>
            }
        }
    }
});

 

四、定義自定義驗證規則

該規則是擴充外掛的validators方法。 
我將專案中常用的方法放到了一個單獨js中，也就是上面第一步引用的自定義方法。

使用方法如下：

(function($) {
    //自定義表單驗證規則
    $.fn.bootstrapValidator.validators = {
        <validatorName> : {
            /**
             * @param {BootstrapValidator} 表單驗證例項物件
             * @param {jQuery} $field jQuery 物件
             * @param {Object} 表單驗證配置項值
             * @returns {boolean}
             */
            validate: function(validator, $field, options) {
                // 表單輸入的值
                // var value = $field.val();

                //options為<validatorOptions>物件，直接.獲取需要的值

                // 返回true/false
                //也可返回{ valid : true/false, message: `XXXX`}
                return reg.test( $field.val() );

            }
        },
    };
}(window.jQuery));

 

五、常用事件

1、重置某一單一驗證欄位驗證規則

$(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );

2、重置表單所有驗證規則

$(formName).data("bootstrapValidator").resetForm();

3、手動觸發表單驗證

//觸發全部驗證
$(formName).data(“bootstrapValidator”).validate();
//觸發指定欄位的驗證
$(formName).data(“bootstrapValidator”).validateField(`fieldName`);

4、獲取當前表單驗證狀態

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();

 

5、根據指定欄位名稱獲取驗證物件

// element = jq物件 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements(`fieldName`);

 

六、表單提交

1、當提交按鈕是普通按鈕 
手動觸發表單驗證 
示例：

 $("buttonName").on("click", function(){
     //獲取表單物件
    var bootstrapValidator = form.data(`bootstrapValidator`);
        //手動觸發驗證
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            //表單提交的方法、比如ajax提交
        }
});

 

2、當提交按鈕的[type=”submit”]時 
會在success之前自動觸發表單驗證

var bootstrapValidator = form.data(`bootstrapValidator`);
bootstrapValidator.on(`success.form.bv`, function (e) {
    e.preventDefault();
    //提交邏輯
});

 

不知道各位小夥伴們看懂了沒，這個外掛蠻好用的，上手也快，結合bootstrap風格節省了很多樣式調節

.min.css"/> <script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script> <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> // 帶眾多常用預設驗證規則的 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script> // 不帶常用規則，需自定義規則 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script> //此方法是我編寫常用的自定義規則的，也可直接寫到對應的表單的js中 <script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

 

二、編寫HTML

在表單中，若對某一欄位想新增驗證規則，預設需要以<div class=”form-group”></div>包裹（對應錯誤提示會根據該class值定位），內部<input class="form-control" />標籤必須有name屬性值，此值為驗證匹配欄位。

注：該值不是絕對的，也可以通過js手動指定錯誤提示位置和驗證的輸入框（後續會講解到）。

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email address</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

 

三、新增驗證規則

1、新增到HTML上

<div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="username"
            data-bv-message="The username is not valid"

            required
            data-bv-notempty-message="The username is required and cannot be empty"

            pattern="[a-zA-Z0-9]+"
            data-bv-regexp-message="The username can only consist of alphabetical, number" />
    </div>
</div>

2、新增到js上

注：以下引數上面的賦值都為預設值，不新增該引數即使用預設值

$(formSelector).bootstrapValidator({
    /**
    *  指定不驗證的情況
    *  值可設定為以下三種型別：
    *  1、String  `:disabled, :hidden, :not(:visible)`
    *  2、Array  預設值  [`:disabled`, `:hidden`, `:not(:visible)`]
    *  3、帶回撥函式  
        [`:disabled`, `:hidden`, function($field, validator) {
            // $field 當前驗證欄位dom節點
            // validator 驗證例項物件 
            // 可以再次自定義不要驗證的規則
            // 必須要return，return true or false; 
            return !$field.is(`:visible`);
        }]
    */
    excluded: [`:disabled`, `:hidden`, `:not(:visible)`],
    /**
    * 指定驗證後驗證欄位的提示字型圖示。（預設是bootstrap風格）
    * Bootstrap 版本 >= 3.1.0
    * 也可以使用任何自定義風格，只要引入好相關的字型檔案即可
    * 預設樣式 
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: 15px;
        }
    * 自定義該樣式覆蓋預設樣式
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: -15px;
        }
        .form-horizontal .has-feedback .input-group .form-control-feedback {
            top: 0;
            right: -30px;
        }
    */
    feedbackIcons: {
        valid: `glyphicon glyphicon-ok`,
        invalid: `glyphicon glyphicon-remove`,
        validating: `glyphicon glyphicon-refresh`
    },
    /**
    * 生效規則（三選一）
    * enabled 欄位值有變化就觸發驗證
    * disabled,submitted 當點選提交時驗證並展示錯誤資訊
    */
    live: `enabled`,
    /**
    * 為每個欄位指定通用錯誤提示語
    */
    message: `This value is not valid`,
    /**
    * 指定提交的按鈕，例如：`.submitBtn` `#submitBtn`
    * 當表單驗證不通過時，該按鈕為disabled
    */
    submitButtons: `button[type="submit"]`,
    /**
    * submitHandler: function(validator, form, submitButton) {
    *   //validator: 表單驗證例項物件
    *   //form  jq物件  指定表單物件
    *   //submitButton  jq物件  指定提交按鈕的物件
    * }
    * 在ajax提交表單時很實用
    *   submitHandler: function(validator, form, submitButton) {
            // 實用ajax提交表單
            $.post(form.attr(`action`), form.serialize(), function(result) {
                // .自定義回撥邏輯
            }, `json`);
         }
    * 
    */
    submitHandler: null,
    /**
    * 為每個欄位設定統一觸發驗證方式（也可在fields中為每個欄位單獨定義），預設是live配置的方式，資料改變就改變
    * 也可以指定一個或多個（多個空格隔開） `focus blur keyup`
    */
    trigger: null,
    /**
    * Number型別  為每個欄位設定統一的開始驗證情況，當輸入字元大於等於設定的數值後才實時觸發驗證
    */
    threshold: null,
    /**
    * 表單域配置
    */
    fields: {
        //多個重複
        <fieldName>: {
            //隱藏或顯示 該欄位的驗證
            enabled: true,
            //錯誤提示資訊
            message: `This value is not valid`,
            /**
            * 定義錯誤提示位置  值為CSS選擇器設定方式
            * 例如：`#firstNameMeg` `.lastNameMeg` `[data-stripe="exp-month"]`
            */
            container: null,
            /**
            * 定義驗證的節點，CSS選擇器設定方式，可不必須是name值。
            * 若是id，class, name屬性，<fieldName>為該屬性值
            * 若是其他屬性值且有中劃線連結，<fieldName>轉換為駝峰格式  selector: `[data-stripe="exp-month"]` =>  expMonth
            */
            selector: null,
            /**
            * 定義觸發驗證方式（也可在fields中為每個欄位單獨定義），預設是live配置的方式，資料改變就改變
            * 也可以指定一個或多個（多個空格隔開） `focus blur keyup`
            */
            trigger: null,
            // 定義每個驗證規則
            validators: {
                //多個重複
                //官方預設驗證參照  http://bv.doc.javake.cn/validators/
                // 注：使用預設前提是引入了bootstrapValidator-all.js
                // 若引入bootstrapValidator.js沒有提供常用驗證規則，需自定義驗證規則哦
                <validatorName>: <validatorOptions>
            }
        }
    }
});

四、定義自定義驗證規則

該規則是擴充外掛的validators方法。 
我將專案中常用的方法放到了一個單獨js中，也就是上面第一步引用的自定義方法。

使用方法如下：

(function($) {
    //自定義表單驗證規則
    $.fn.bootstrapValidator.validators = {
        <validatorName> : {
            /**
             * @param {BootstrapValidator} 表單驗證例項物件
             * @param {jQuery} $field jQuery 物件
             * @param {Object} 表單驗證配置項值
             * @returns {boolean}
             */
            validate: function(validator, $field, options) {
                // 表單輸入的值
                // var value = $field.val();

                //options為<validatorOptions>物件，直接.獲取需要的值

                // 返回true/false
                //也可返回{ valid : true/false, message: `XXXX`}
                return reg.test( $field.val() );

            }
        },
    };
}(window.jQuery));

 

五、常用事件

1、重置某一單一驗證欄位驗證規則

$(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );

2、重置表單所有驗證規則

$(formName).data("bootstrapValidator").resetForm();

3、手動觸發表單驗證

//觸發全部驗證
$(formName).data(“bootstrapValidator”).validate();
//觸發指定欄位的驗證
$(formName).data(“bootstrapValidator”).validateField(`fieldName`);

 

4、獲取當前表單驗證狀態

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();

 

5、根據指定欄位名稱獲取驗證物件

// element = jq物件 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements(`fieldName`);

六表單提交

1、當提交按鈕是普通按鈕 
手動觸發表單驗證 
示例：

 $("buttonName").on("click", function(){
     //獲取表單物件
    var bootstrapValidator = form.data(`bootstrapValidator`);
        //手動觸發驗證
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            //表單提交的方法、比如ajax提交
        }
});

 

2、當提交按鈕的[type=”submit”]時 
會在success之前自動觸發表單驗證

var bootstrapValidator = form.data(`bootstrapValidator`);
bootstrapValidator.on(`success.form.bv`, function (e) {
    e.preventDefault();
    //提交邏輯
});

 

不知道各位小夥伴們看懂了沒，這個外掛蠻好用的，上手也快，結合bootstrap風格節省了很多樣式調節

相關文章