關於bootstrap的驗證插件bootstrapValidator使用時遇到的坑

最近手裏的項目由於項目性質的原因表單衆多，每個表單的字段也是非常多，由於初期的時候考慮進度沒有使用驗證，後期項目優化的時候上邊要求加上幾個字段的驗證，由於前端框架用的是bootstrap,考略到協調性和體驗感問題，遂決定使用bootstrap的驗證框架boostrapCalidator，在使用的時候遇到了幾個問題，整理一下已做備忘，順便希望能幫助需要的夥伴們。

前言：bootstrap使用的通用驗證配置是：

           $("form").bootstrapValidator({
                message: '通用提示內容!',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',//驗證成功圖標
                    invalid: 'glyphicon glyphicon-remove',//驗證失敗圖標
                    validating: 'glyphicon glyphicon-refresh'//驗證中圖標
                },
                fields:[
                    <fieldName>: {//針對字段（表單內input對應的name）
                        enabled: true,//開啓驗證
                        message: 'This value is not valid',//特殊提示內容只針對這個字段
                        validators:{
                            //<validatorName>: <validatorOptions>//多個驗證的驗證名稱和驗證配置
                            //如：非空
                            notEmpty: {//非空驗證：提示消息
                                message: '賬號/用戶名不能爲空'
                            }
                        }
                    }
                ]
            })

常用的通用驗證有很多，如notEmpty(非空),stringLength(字符串長度),regexp(正則),identical(相同),different(不同)等等，需要的小夥伴可以自行百度。

也可以參考這篇文章：傳送門

-------------------------------------華麗麗的分割線--------------------------------------------

下邊說我遇到的幾個比較特殊的用法

1.前端使用函數進行自定義驗證(callback)：

        這個功能用於需要實現的驗證規則不在那些已經聲明通用驗證中，需要自己聲明驗證規則的時候，具體用法：

validators: {
	callback: {
		message: 'Wrong answer',
		callback: function(value, validator) {//value爲當前input的值
			//你的自定義驗證規則
			return result;//返回一個布爾值
		}
	}
}

 

2.前段調用接口向後端請求，由後端計算驗證結果(remote):

        這個功能用於需要去後端驗證的時候（如做數據庫唯一驗證時），具體的用法（注意代碼片段中最後兩句話）：

remote: {
     url: 'validatUrl',//驗證接口地址
     message: '驗證不通過！',//提示消息
     delay :  1000,//默認每輸入一個字符，就發ajax請求，服務器壓力還是太大，設置1秒發送一次ajax
     type: 'POST',//請求方式
     data:'',//爲空時會默認將當前字段的值傳到後臺
     data:function(){
         //可以做一些驗證後的關聯操作，比如驗證失敗時置空當前input
     }
 }
 
//注意：這個地方的後臺接口必須返回結果的json格式爲{"valid",true or false} 
//如表示驗證成功：{"valid",true}

3.這裏說的是一個我遇到的坑：

        事故背景：項目表單中存在很多type=number的數字輸入框

        事故原因：boostrapValidate不知出於什麼樣的考慮，將所有的type=number的輸入框全部默認加上了驗證

        事故現場：項目很多表單中存在大量的type=number的input,但是我需要驗證的input中type=number的只有name=reportYear的輸入框，使用驗證框架驗證之後，所有的type=number的輸入框全部出現驗證結果

        解決方案：在boostrapValidate配置項中加上一句話：

                          

excluded: [':disabled', ':hidden', ':not(:visible)','[type=number]:not[name=reportYear]']

//和fields同級

以上是最近遇到的問題，希望可以幫到需要的夥伴們。