Bootstrap Validator 表單驗(yàn)證
在線演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html
使用方法,代碼如下所示:
1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group"> 3. <label class="col-lg-3 control-label">用戶名</label> 4. <div class="col-lg-5"> 5. <input type="text" class="form-control" name="username" /> 6. </div> 7. </div> 8. 9. <div class="form-group"> 10. <label class="col-lg-3 control-label">郵箱</label> 11. <div class="col-lg-5"> 12. <input type="text" class="form-control" name="email" /> 13. </div> 14. </div> 15. 16. <div class="form-group"> 17. <label class="col-lg-3 control-label">生日</label> 18. <div class="col-lg-5"> 19. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD) 20. </div> 21. </div> 22. 23. <div class="form-group"> 24. <div class="col-lg-9 col-lg-offset-3"> 25. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">提交</button> 26. <button type="button" class="btn btn-info" id="validateBtn">自動(dòng)驗(yàn)證</button> 27. <button type="button" class="btn btn-info" id="resetBtn">重置表單</button> 28. </div> 29. </div> 30.</form> 1.$('#defaultForm').bootstrapValidator({ 2. message: 'This value is not valid', 3. feedbackIcons: { 4. valid: 'glyphicon glyphicon-ok', 5. invalid: 'glyphicon glyphicon-remove', 6. validating: 'glyphicon glyphicon-refresh' 7. }, 8. fields: { 9. username: { 10. message: 'The username is not valid', 11. validators: { 12. notEmpty: { 13. message: 'The username is required and cannot be empty' 14. }, 15. stringLength: { 16. min: 6, 17. max: 30, 18. message: 'The username must be more than 6 and less than 30 characters long' 19. }, 20. regexp: { 21. regexp: /^[a-zA-Z0-9_\.]+$/, 22. message: 'The username can only consist of alphabetical, number, dot and underscore' 23. }, 24. remote: { 25. url: 'remote.php', 26. message: 'The username is not available' 27. }, 28. different: { 29. field: 'password', 30. message: 'The username and password cannot be the same as each other' 31. } 32. } 33. }, 34. email: { 35. validators: { 36. emailAddress: { 37. message: 'The input is not a valid email address' 38. } 39. } 40. }, 41. } 42.});
以上所述是小編給大家介紹的Bootstrap Validator 表單驗(yàn)證的全部敘述,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家!
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- jquery插件bootstrapValidator表單驗(yàn)證詳解
- bootstrap 表單驗(yàn)證使用方法
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)表單驗(yàn)證
- 基于BootstrapValidator的Form表單驗(yàn)證(24)
- Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
- 基于Bootstrap表單驗(yàn)證功能
相關(guān)文章
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題,對(duì)此感興趣的同學(xué),可以實(shí)驗(yàn)一下,以便解決平時(shí)遇到的一些奇怪的問題。2021-05-05深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實(shí)際名字的函數(shù),匿名函數(shù)(function() {})();是一個(gè)特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08常見的JavaScript內(nèi)存錯(cuò)誤及解決方法
這篇文章主要介紹了常見的JavaScript內(nèi)存錯(cuò)誤,JavaScript?不提供任何內(nèi)存管理操作。相反,內(nèi)存由?JavaScript?VM?通過內(nèi)存回收過程管理,該過程稱為垃圾收集。下面我們就來看看下面文章對(duì)JavaScript內(nèi)存錯(cuò)誤的各種舉例說明吧2021-12-12淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性
下面小編就為大家?guī)硪黄獪\談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11JavaScript 實(shí)現(xiàn)的checkbox經(jīng)典實(shí)例分享
本文主要給大家分享的是JavaScript實(shí)現(xiàn)checkbox多項(xiàng)選擇的經(jīng)典代碼,非常的簡單實(shí)用,有需要的小伙伴可以參考下2016-10-10ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
這篇文章主要介紹了ES6新特性二:Iterator(遍歷器)和for-of循環(huán),結(jié)合實(shí)例形式分析了ES6中Iterator(遍歷器)和for-of循環(huán)遍歷操作的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-04-04原生JavaScript實(shí)現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實(shí)現(xiàn)todolist功能相關(guān)知識(shí)點(diǎn),對(duì)此有需要的朋友可以學(xué)習(xí)下。2018-03-03js數(shù)組刪除問題(splice和delete的用法)
這篇文章主要介紹了js數(shù)組刪除問題(splice和delete的用法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02javascript運(yùn)算符——邏輯運(yùn)算符全面解析
下面小編就為大家?guī)硪黄猨avascript運(yùn)算符——邏輯運(yùn)算符詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06