如果你使用的前端架構是bootstrap，那麼前端驗證架構就不必考慮了，bootstrapvalidator是最好的選擇，它和bootstrap的結合最完美，不過要注意版本的問題，針對bootstrap2和bootstrap3有不同的版本。
下面是我遇到的兩個注意事項，自己做個筆記：
1、為每個要驗證的表單元素添加name屬性
例如：
data-bv-notempty data-bv-notempty-message="驗證碼不能為空"
data-bv-regexp="true" data-bv-regexp-regexp="[0-9]{6}" data-bv-regexp-message="驗證碼格式不正确" >
data-bv-notempty data-bv-notempty-message="驗證碼不能為空" >
上面這個例子中，第一個表單元素添加了name屬性，第二個表單元素沒有name屬性，而這兩個表單元素都使用了非空驗證，最終效果如下：
從結果可以看出，如果要驗證一個表單項，則該表單項必須有name屬性。否則驗證将不起作用。
2、為保持良好的效果，表單元素最好放在div.form-group裡面
例如下面這個例子：
使用者名
使用者名輸入框及其label直接放在了form元素下面，則最終産生的效果如下：
當輸入錯誤時的提示資訊位置在整個form表單的下面，樣式發生了極大的變化，雖然能達到驗證的效果，但是樣式卻難以令人接受，解決辦法就是将需要驗證的表單元素放在div.form-group下面：
使用者名
3、防止表單重複送出問題
在未引入bootstrapvalidator之前，自己寫過一段js代碼來防止表單送出，當使用者點選送出按鈕時候，将送出按鈕置灰，代碼如下：
var form = $('form');
var formType = form.attr('class');
if(formType != null){
//用get和post辨別表單類型
//get用于辨別搜尋類型的表單
//post用于辨別添加，更新類型的表單
var get = formType.indexOf('get');
var post = formType.indexOf('post');
form.submit(function(){
if(get != -1){
return ;
}
if(post != -1){
if(!submited){
submited = true;
$("button[type=submit]").prop('disabled',true);
}else{
return false;
}
}
});
}
但是引入bootstrapvalidator後卻和這段代碼沖突，具體表現為，如果驗證出錯，例如，某個input必填項沒有填寫時就送出了表單，此時bootstrapvalidator會提示你這個input為必填的，此時送出按鈕為disable狀态，直到你填入資料後，按鈕才為正常可送出狀态，問題就在這，即使你填入了正常的資料，按鈕也為正常狀态，可是表單卻無法送出。排查了大半天，問題就在于上段js代碼。
其實bootstrapvalidator已經對重複送出做了設計，如果一個表單需要經過bootstrapvalidator驗證，點選送出按鈕的時候，送出按鈕會置灰，直到伺服器傳回響應。那麼，如果一個表單不需要驗證呢，比如一個搜尋表單，此時可以給表單一個class,如validation-form，在js主函數裡面調用$("form.validation-form").bootstrapValidator();将驗證器置空即可。
推薦閱讀：
以上所述是小編給大家介紹的BootStrap Validator使用注意事項(必看篇)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！