Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能
更新時間：2017年05月17日 16:08:34 作者：北冥沒有魚
這篇文章主要介紹了Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能,需要的朋友可以參考下
最近項目用到了一個很強大的表單驗證。記錄下。官方地址：http://formvalidation.io/api/
還有一點很重要：這個插件的Bootstrap最好用他們自帶的，有點改動。不用再去Bootstrap官網(wǎng)下載。
向上效果：
先導(dǎo)入資源：
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="dist/js/formValidation.js"></script> <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script> <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>
html：
<form id="defaultForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="boxId" />
</div>
</div>
</form>
下面是驗證代碼；
$('#defaultForm').formValidation({
message: '此值無效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{
boxId:{
verbose: false,//代表驗證按順序驗證。驗證成功才會下一個（驗證成功才會發(fā)最后一個remote遠程驗證）
validators: {
notEmpty: {
message: '這是必填字段'
},
digits: {
message: '值不是數(shù)字'
},
stringLength: {
min: 16,
message:'必須為16個數(shù)字'
},
remote: {
type: 'POST',
url: '/box/unique',
message: '此設(shè)備號已存在',
delay: 2000
}
}
},
onSuccess:function(){
//點擊提交表單。表單所有都驗證成功
}
});
后臺返回
{ “valid”: true }//通過驗證
或
{ “valid”: false }//不通過—》 ‘此設(shè)備號已存在',
效果圖；
以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
淺談js多維數(shù)組和hash數(shù)組定義和使用
下面小編就為大家?guī)硪黄獪\談js多維數(shù)組和hash數(shù)組定義和使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
微信小程序?qū)W習(4)-系統(tǒng)配置app.json詳解
我們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。2017-01-01
在做項目的時候，經(jīng)常遇到發(fā)短信驗證碼的問題，這時候需要用戶點完發(fā)送驗證碼按鈕后，一段時間內(nèi)不能重復(fù)點擊，畢竟驗證碼都是收費的嘛，誰都不想浪費，那么如何實現(xiàn)這種功能呢？下面來分享一下。2014-06-06
下面小編就為大家?guī)硪黄狫S獲取和修改元素樣式的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS仿Windows開機啟動Loading進度條的方法,實例分析了javascript操作html元素及對應(yīng)樣式實現(xiàn)特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日歷簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Firefox中使用outerHTML的2種解決方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS上傳圖片預(yù)覽插件制作（兼容到IE6）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，這篇文章主要為大家詳細介紹了Bootstrap表單控件，用來與用戶做交流的一個網(wǎng)頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
相信很多與頁面打過交道的同學(xué)都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10