如果你使用的前端框架是bootstrap，那么前端驗(yàn)證框架就不必考慮了，bootstrapvalidator是最好的選擇，它和bootstrap的結(jié)合最完美，不過要注意版本的問題，針對(duì)bootstrap2和bootstrap3有不同的版本。
下面是我遇到的兩個(gè)注意事項(xiàng)，自己做個(gè)筆記：
1、為每個(gè)要驗(yàn)證的表單元素添加name屬性
例如：
<div class="form-group"> <input type="text" placeholder="請(qǐng)輸入短信驗(yàn)證碼" id="smsCaptcha" name="smsCaptcha" class="form-control" data-bv-notempty data-bv-notempty-message="驗(yàn)證碼不能為空" data-bv-regexp="true" data-bv-regexp-regexp="[0-9]{6}" data-bv-regexp-message="驗(yàn)證碼格式不正確" > </div> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" data-bv-notempty data-bv-notempty-message="驗(yàn)證碼不能為空" > </div>上面這個(gè)例子中，第一個(gè)表單元素添加了name屬性，第二個(gè)表單元素沒有name屬性，而這兩個(gè)表單元素都使用了非空驗(yàn)證，最終效果如下：
從結(jié)果可以看出，如果要驗(yàn)證一個(gè)表單項(xiàng)，則該表單項(xiàng)必須有name屬性。否則驗(yàn)證將不起作用。
2、為保持良好的效果，表單元素最好放在div.form-group里面
例如下面這個(gè)例子：
<label for="exampleInputEmail1">用戶名</label> <div class="input-group" > <input type="text" class="form-control required" placeholder="用戶名" id="username" name="username" data-bv-notempty data-bv-notempty-message="請(qǐng)輸入用戶名" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> </div>
用戶名輸入框及其label直接放在了form元素下面，則最終產(chǎn)生的效果如下：
當(dāng)輸入錯(cuò)誤時(shí)的提示信息位置在整個(gè)form表單的下面，樣式發(fā)生了極大的變化，雖然能達(dá)到驗(yàn)證的效果，但是樣式卻難以令人接受，解決辦法就是將需要驗(yàn)證的表單元素放在div.form-group下面：
<div class="form-group"> <label for="exampleInputEmail1">用戶名</label> <div class="input-group" > <input type="text" class="form-control required" placeholder="用戶名" id="username" name="username" data-bv-notempty data-bv-notempty-message="請(qǐng)輸入用戶名" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> </div> </div>
3、防止表單重復(fù)提交問題
在未引入bootstrapvalidator之前，自己寫過一段js代碼來防止表單提交，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)候，將提交按鈕置灰，代碼如下：
var form = $('form'); var formType = form.attr('class'); if(formType != null){ //用get和post標(biāo)識(shí)表單類型 //get用于標(biāo)識(shí)搜索類型的表單 //post用于標(biāo)識(shí)添加，更新類型的表單 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后卻和這段代碼沖突，具體表現(xiàn)為，如果驗(yàn)證出錯(cuò)，例如，某個(gè)input必填項(xiàng)沒有填寫時(shí)就提交了表單，此時(shí)bootstrapvalidator會(huì)提示你這個(gè)input為必填的，此時(shí)提交按鈕為disable狀態(tài)，直到你填入數(shù)據(jù)后，按鈕才為正常可提交狀態(tài)，問題就在這，即使你填入了正常的數(shù)據(jù)，按鈕也為正常狀態(tài)，可是表單卻無法提交。排查了大半天，問題就在于上段js代碼。
其實(shí)bootstrapvalidator已經(jīng)對(duì)重復(fù)提交做了設(shè)計(jì)，如果一個(gè)表單需要經(jīng)過bootstrapvalidator驗(yàn)證，點(diǎn)擊提交按鈕的時(shí)候，提交按鈕會(huì)置灰，直到服務(wù)器返回響應(yīng)。那么，如果一個(gè)表單不需要驗(yàn)證呢，比如一個(gè)搜索表單，此時(shí)可以給表單一個(gè)class,如validation-form，在js主函數(shù)里面調(diào)用$("form.validation-form").bootstrapValidator();將驗(yàn)證器置空即可。
推薦閱讀：
Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
以上所述是小編給大家介紹的BootStrap Validator使用注意事項(xiàng)(必看篇)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
