Bootstrap Validator 表單驗證
在線演示地址: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">自動驗證</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 表單驗證的全部敘述,希望對大家有所幫助,如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家!
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- JS組件Form表單驗證神器BootstrapValidator
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
- 實用又漂亮的BootstrapValidator表單驗證插件
- jquery插件bootstrapValidator表單驗證詳解
- bootstrap 表單驗證使用方法
- 基于Bootstrap+jQuery.validate實現(xiàn)表單驗證
- 基于BootstrapValidator的Form表單驗證(24)
- Bootstrap 表單驗證formValidation 實現(xiàn)表單動態(tài)驗證功能
- 基于Bootstrap表單驗證功能
相關(guān)文章
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題,對此感興趣的同學(xué),可以實驗一下,以便解決平時遇到的一些奇怪的問題。2021-05-05
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實際名字的函數(shù),匿名函數(shù)(function() {})();是一個特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
JavaScript 實現(xiàn)的checkbox經(jīng)典實例分享
本文主要給大家分享的是JavaScript實現(xiàn)checkbox多項選擇的經(jīng)典代碼,非常的簡單實用,有需要的小伙伴可以參考下2016-10-10
ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
這篇文章主要介紹了ES6新特性二:Iterator(遍歷器)和for-of循環(huán),結(jié)合實例形式分析了ES6中Iterator(遍歷器)和for-of循環(huán)遍歷操作的相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-04-04
原生JavaScript實現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實現(xiàn)todolist功能相關(guān)知識點,對此有需要的朋友可以學(xué)習(xí)下。2018-03-03
js數(shù)組刪除問題(splice和delete的用法)
這篇文章主要介紹了js數(shù)組刪除問題(splice和delete的用法),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02

