BootstrapValidator 表單驗證超詳細教程

1、 引入js 和css文件 

在有jquery和bootstrap的頁面裏引入

1. 　　bootstrapValidator.js
2. 　　bootstrapValidator.css

連接: https://pan.baidu.com/s/1eGMPFGISB618gYFttGPgaw 密碼: 請加我qq（2353806846）獲取

2、 編寫html

而後創建一個form表單，添加表單控件，若對某一字段想添加驗證規則，

默認須要以<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>

3、添加驗證規則

一、在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>

二、 添加 js 文件

$(function () { $("#form-test").bootstrapValidator({ live: 'disabled',//驗證時機，enabled是內容有變化就驗證（默認），disabled和submitted是提交再驗證 
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控件，好比被禁用的或者被隱藏的 
        submitButtons: '#btn-test',//指定提交按鈕，若是驗證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會提交到action指定頁面 
        message: '通用的驗證失敗消息',//好像歷來沒出現過 
        feedbackIcons: {//根據驗證結果顯示的各類圖標 
            valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { text: { validators: { notEmpty: {//檢測非空,radio也可用 
                        message: '文本框必須輸入' }, stringLength: {//檢測長度 
                        min: 6, max: 30, message: '長度必須在6-30之間' }, regexp: {//正則驗證 
                        regexp: /^[a-zA-Z0-9_\.]+$/, message: '所輸入的字符不符要求' }, remote: {//將內容發送至指定頁面驗證，返回驗證結果，好比查詢用戶名是否存在 
                        url: '指定頁面', message: 'The username is not available' }, different: {//與指定文本框比較內容相同 
                        field: '指定文本框name', message: '不能與指定文本框內容相同' }, emailAddress: {//驗證email地址 
                        message: '不是正確的email地址' }, identical: {//與指定控件內容比較是否相同，好比兩次密碼不一致 
                        field: 'confirmPassword',//指定控件name 
                        message: '輸入的內容不一致' }, date: {//驗證指定的日期格式 
                        format: 'YYYY/MM/DD', message: '日期格式不正確' }, choice: {//check控件選擇的數量 
                        min: 2, max: 4, message: '必須選擇2-4個選項' } } } } }); $("#btn-test").click(function () {//非submit按鈕點擊後進行驗證，若是是submit則無需此句直接驗證 
        $("#form-test").bootstrapValidator('validate');//提交驗證 
        if ($("#form-test").data('bootstrapValidator').isValid()) {//獲取驗證結果，若是成功，執行下面代碼 
            alert("yes");//驗證成功後的操做，如ajax 
 } }); }); 

4、前端自定義驗證規則

一、回調自定義驗證

Bootstrapvalidator的前端自定義驗證爲callback

"rowkey": { message: 'rowkey驗證失敗', validators: { stringLength:{ max: 1000, message: 'rowkey不能超過1000個字符' }, callback:{ callback : function(value, validator, $field) { if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" && value == ""){ return { valid: false, message: 'rowkey不能爲空' } } else{ return true } } } } }

二、拓展插件的validators方法

將項目中經常使用的方法放到了一個單獨js中

$(function () { $.fn.bootstrapValidator.validators.checkIdCard = { /** * @param {BootstrapValidator} 表單驗證明例對象 * @param {jQuery} $field jQuery 對象 * @param {Object} 表單驗證配置項值 * @returns {boolean} */ validate: function (validator, $field, options) { // debugger;
            try { return checkIdCardNo($field.val()); }catch (e){ console.error(e); } return false; } }; }(window.jQuery));

 

三、remote 後端自定義驗證

     Bootstrapvalidator的前端自定義驗證爲remote，在數據庫驗重時常常會用到 

"tableName": { message: '表名稱驗證失敗', validators: { notEmpty: { message: '表名稱不能爲空' }, stringLength:{ max: 100, message: '表名稱不能超過100個字符' }, remote: { message: '表名重複', url: 'check', data : '',//這裏默認會傳遞該驗證字段的值到後端
            delay: 2000 //這裏特別要說明，必需要加此屬性，不然用戶輸入一個字就會訪問後臺一次，會消耗大量的系統資源，
 } } },

後端代碼：

//檢測新增metaTableName是否重複
 def check(){ def map = new HashMap() def result = service.check(params.name) if(result){ map.put("valid",true) }else{ map.put("valid",false) } render(map as JSON) // 注意後端傳到前端的格式必須是帶有valid屬性的json對象纔會被validator識別，
　　　　　　　　　　　　　　　　 //　若是返回任何其餘的值，頁面驗證將獲取不到驗證結果致使沒法驗證
    }

1. {"valid":false} //表示不合法，驗證不經過  
2. {"valid":true} //表示合法，驗證經過  

 

5、經常使用事件

一、獲取validator對象或實例

通常使用校驗是直接調用$(form).bootstrapValidator(options)來初始化validator。初始化後有兩種方式獲取validator對象或實例，能夠用來調用其對象的方法，好比調用resetForm來重置表單。有兩種方式獲取：
1）

// Get plugin instance  
var bootstrapValidator = $(form).data('bootstrapValidator');  
// and then call method  
bootstrapValidator.methodName(parameters)

這種方式獲取的是BootstrapValidator的實例，能夠直接調用其方法。
2）

$(form).bootstrapValidator(methodName, parameters);

這種方式獲取的是表明當前form的jquery對象，調用方式是將方法名和參數分別傳入到bootstrapValidator方法中，能夠鏈式調用。

兩種方式的使用分別以下：

// The first way  
$(form)  
    .data('bootstrapValidator')  
    .updateStatus('birthday', 'NOT_VALIDATED')  
    .validateField('birthday');  
  
// The second one  
$(form)  
    .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')  
    .bootstrapValidator('validateField', 'birthday');

二、重置某一單一驗證字段驗證規則

$(formName).data(「bootstrapValidator」).updateStatus("fieldName",  "NOT_VALIDATED",  null );

三、重置表單全部驗證規則

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

四、手動觸發表單驗證

//觸發所有驗證
$(formName).data(「bootstrapValidator」).validate(); //觸發指定字段的驗證
$(formName).data(「bootstrapValidator」).validateField('fieldName');

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

var flag = $(formName).data(「bootstrapValidator」).isValid();

六、根據指定字段名稱獲取驗證對象

// element = jq對象 / null
var element = $(formName).data(「bootstrapValidator」).getFieldElements('fieldName');