BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的輸入驗(yàn)證，由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上圖，看看完成后的結(jié)果：
怎么樣，還比較和諧把，當(dāng)然你也可以修改默認(rèn)樣式，讓它的顯示方式更加美觀。
下面來(lái)說(shuō)說(shuō)他的用法：
1.下載BootStrapValidator
你可以點(diǎn)擊BootStrapValidator官方下載地址來(lái)下載它。
2.下載后的目錄結(jié)構(gòu)
下載完成后，如果是全部文件的化，目錄結(jié)構(gòu)如下：
其中可以直接在項(xiàng)目中使用的文件都放在dist文件夾中，使用的實(shí)例放在demo中，它所依賴的BootStrap以及Jquery文件都放在Vendor文件夾中。如果您項(xiàng)目的BootStrap版本和它所使用的版本不一致，建議使用它的BootStrap文件，否則可能會(huì)導(dǎo)致顯示效果出問(wèn)題（困擾了我好幾天，終于解決了），下面看看怎么用：
3.用法
沒(méi)什么說(shuō)的，直接上代碼：
(1)庫(kù)引用
<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/><script src="../public/static/js/jquery.min.js"></script><script src="../public/static/vendor/bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet" href="../public/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/><script type="text/javascript" src="../public/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
主要引用了BootStrap的js和css文件，以及BootStrapValidator的js和CSS文件。以上是根據(jù)我的項(xiàng)目結(jié)構(gòu)來(lái)引用的，當(dāng)然您可以按照自己的想法來(lái)建立目錄。
(2)HTML部分
<div class="row"><form action="dologin" method="post" id="loginform"> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input type="text" class="form-control" name="username" placeholder="用戶名" /> </div> </div> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span> <input type="password" class="form-control" name="pwd" placeholder="密碼" /> </div> </div> <div class="well well-sm" style="text-align:center;"> <input type="radio" name="kind" value="tea"> 老師 <input type="radio" name="kind" value="stu"> 學(xué)生 </div> <button type="submit" class="btn btn-success btn-block"> 登錄 </button> </form> </div>
(3)Jquery驗(yàn)證部分代碼
$(document).ready(function(){ // 在這里寫(xiě)你的代碼... $('#loginform').bootstrapValidator({ message:"您的輸入值不合法", feedbackIcons:{ valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields:{ username:{ validators:{ notEmpty:{ message:'用戶名不能為空' } } }, pwd:{ validators:{ notEmpty:{ message:'請(qǐng)輸入密碼' } } } }, }); });好了，到這里就寫(xiě)完了，當(dāng)然這里只是一些基本用法，它還有其他更強(qiáng)大的功能，比如異步驗(yàn)證（和服務(wù)器端通信驗(yàn)證），網(wǎng)上教程很多，這里就不再贅述。希望本文對(duì)您有所幫助！
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
