Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能
最近項(xiàng)目用到了一個(gè)很強(qiáng)大的表單驗(yàn)證。記錄下。官方地址:http://formvalidation.io/api/
還有一點(diǎn)很重要:這個(gè)插件的Bootstrap最好用他們自帶的,有點(diǎn)改動(dòng)。不用再去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>
下面是驗(yàn)證代碼;
$('#defaultForm').formValidation({ message: '此值無(wú)效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{ boxId:{ verbose: false,//代表驗(yàn)證按順序驗(yàn)證。驗(yàn)證成功才會(huì)下一個(gè)(驗(yàn)證成功才會(huì)發(fā)最后一個(gè)remote遠(yuǎn)程驗(yàn)證) validators: { notEmpty: { message: '這是必填字段' }, digits: { message: '值不是數(shù)字' }, stringLength: { min: 16, message:'必須為16個(gè)數(shù)字' }, remote: { type: 'POST', url: '/box/unique', message: '此設(shè)備號(hào)已存在', delay: 2000 } } }, onSuccess:function(){ //點(diǎn)擊提交表單。表單所有都驗(yàn)證成功 } });
后臺(tái)返回
{ “valid”: true }//通過(guò)驗(yàn)證 或 { “valid”: false }//不通過(guò)—》 ‘此設(shè)備號(hào)已存在',
效果圖;
以上所述是小編給大家介紹的Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)遠(yuǎn)程驗(yàn)證功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
相關(guān)文章
javascript實(shí)現(xiàn)左右緩動(dòng)動(dòng)畫函數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)左右緩動(dòng)動(dòng)畫函數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)(函數(shù)節(jié)流)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)問(wèn)題(函數(shù)節(jié)流),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09跟我學(xué)習(xí)javascript的異步腳本加載
跟我學(xué)習(xí)javascript的異步腳本加載,告訴大家如何使自己的站點(diǎn)更快捷,以及最簡(jiǎn)單的方法 利用什么樣的工具達(dá)到預(yù)期效果,想一探究竟的朋友可以參考一下這篇文章。2015-11-11js禁止Backspace鍵使瀏覽器后退的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js禁止Backspace鍵使瀏覽器后退的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09js剪切板應(yīng)用clipboardData實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了js剪切板應(yīng)用clipboardData實(shí)例,并分享了四種實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-05-05javascript中驗(yàn)證大寫字母、數(shù)字和中文
本文為大家介紹下使用javascript驗(yàn)證大寫字母小寫字母,數(shù)字和中文,具體示例如下2014-01-01Selenium執(zhí)行JavaScript腳本的方法示例
這篇文章主要介紹了Selenium執(zhí)行JavaScript腳本的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過(guò)小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫(kù)獲取車源和求購(gòu)的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來(lái),需要的朋友可以參考下2022-10-10