bootstrapValidator 表單驗證_ZenDei技術網路在線

一、引入必要文件下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) 一、引入必要文件下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/ar ...

一、引入必要文件

下載地址：(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>