Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能
更新時間：2017年05月17日 16:08:34 作者：北冥沒有魚
這篇文章主要介紹了Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能,需要的朋友可以參考下
最近項目用到了一個很強大的表單驗證。記錄下。官方地址：http://formvalidation.io/api/
還有一點很重要：這個插件的Bootstrap最好用他們自帶的，有點改動。不用再去Bootstrap官網(wǎng)下載。
向上效果：
先導入資源：
<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: '此設備號已存在',
delay: 2000
}
}
},
onSuccess:function(){
//點擊提交表單。表單所有都驗證成功
}
});
后臺返回
{ “valid”: true }//通過驗證
或
{ “valid”: false }//不通過—》 ‘此設備號已存在',
效果圖；
以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現(xiàn)遠程驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
javascript實現(xiàn)左右緩動動畫函數(shù)
這篇文章主要為大家詳細介紹了javascript實現(xiàn)左右緩動動畫函數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本篇文章是JS的一個網(wǎng)頁制作小技巧，應用在很多地方，通過JS改變HTML頁面的顏色，有興趣的學習下。2018-02-02
這篇文章主要介紹了微信小程序防止多次點擊跳轉問題（函數(shù)節(jié)流）,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
跟我學習javascript的異步腳本加載，告訴大家如何使自己的站點更快捷，以及最簡單的方法 利用什么樣的工具達到預期效果，想一探究竟的朋友可以參考一下這篇文章。2015-11-11
js禁止Backspace鍵使瀏覽器后退的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s禁止Backspace鍵使瀏覽器后退的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了js剪切板應用clipboardData實例，并分享了四種實現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-05-05
本文為大家介紹下使用javascript驗證大寫字母小寫字母，數(shù)字和中文，具體示例如下2014-01-01
Selenium執(zhí)行JavaScript腳本的方法示例
這篇文章主要介紹了Selenium執(zhí)行JavaScript腳本的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
js中net::ERR_FILE_NOT_FOUND報錯的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要給大家介紹了關于微信小程序前后端數(shù)據(jù)交互的相關資料,通過小程序向后端發(fā)送請求,然后后端從數(shù)據(jù)庫獲取車源和求購的數(shù)量反饋給小程序,最后將這兩個數(shù)據(jù)顯示出來,需要的朋友可以參考下2022-10-10