经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
bootStrap表单验证插件的使用
来源：cnblogs　　作者：kx王　　时间：2019/6/17 8:59:58　　对本文有异议

bootStrapValidator插件的使用

1.插件的下载和引用

首先要引入bootstrapValidator插件。链接的地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用网页中的插件连接，也可以将源码下载到本地使用。
要使用bootstrapValidator插件，代码中还要除了引入bootstrapValidator插件的js和css外，还要引入jQuery.js和bootStrap的js和css。

  1. 1 <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  2. 2 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
  3. 3 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  4. 4 <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  5. 5 <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

注意：所有的表单控件一定要放到类名为from-group的div内部，验证才会生效。html代码如下:

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="class_name" id="inputName"
  8.  8                            placeholder="请输入班级名称">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

2.bootStrapValidator的常用验证

2.1 非空验证 notEmpty

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="class_name" id="inputName"
  8.  8                            placeholder="请输入班级名称">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

接着加入验证js代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'submitted', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 class_name: {
  14. 14                     validators: {
  15. 15                         notEmpty: {
  16. 16                             message: '班级名称不能为空'
  17. 17                         }
  18. 18                     }
  19. 19                 }
  20. 20             }
  21. 21         })
  22. 22     })
  23. 23 </script>

2.2 数值验证 numeric

 html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="price" id="inputName"
  8.  8                            placeholder="请输入商品价格">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 price: {
  14. 14                     validators: {
  15. 15                         numeric: {
  16. 16                             message: '价格必须为数值'
  17. 17                         }
  18. 18                     }
  19. 19                 }
  20. 20             }
  21. 21         })
  22. 22     })
  23. 23 </script>

2.3 整数验证 digits

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级人数</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="std_num" id="inputName"
  8.  8                            placeholder="请输入班级人数">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 std_num: {
  14. 14                     validators: {
  15. 15                         digits: {
  16. 16                             message: '价格必须为数值'
  17. 17                         }
  18. 18                     }
  19. 19                 }
  20. 20             }
  21. 21         })
  22. 22     })
  23. 23 </script>

2.4 最大值和最小值验证 lessThan和greaterThan

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="max_num" id="inputName"
  8.  8                            placeholder="请输入10-100之间的值">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 max_num: {
  14. 14                     validators: {
  15. 15                         lessThan: { //最大值验证
  16. 16                             value: 100,
  17. 17                             inclusive:false, //是否包含当前值，false不包含，true包含。默认为true
  18. 18                             message: '值不能大于或等于100'
  19. 19                         },
  20. 20                         greaterThan: {  //最小值验证
  21. 21                             value:10,
  22. 22                             inclusive:true,
  23. 23                             message: '值不能小于10'
  24. 24                         }
  25. 25                     }
  26. 26                 }
  27. 27             }
  28. 28         })
  29. 29     })
  30. 30 </script>

2.5 数值范围验证 between

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">年龄</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="age" id="inputName"
  8.  8                            placeholder="请输入年龄">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 age: {
  14. 14                     validators: {
  15. 15                         between:{
  16. 16                             max:60,
  17. 17                             min:18,
  18. 18                             message: '年龄必须在18~60之间'
  19. 19                         }
  20. 20                     }
  21. 21                 }
  22. 22             }
  23. 23         })
  24. 24     })
  25. 25 </script>

2.6 字符串长度验证 stringLength

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">用户名</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="age" id="inputName"
  8.  8                            placeholder="请输入用户名">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 age: {
  14. 14                     validators: {
  15. 15                         stringLength:{
  16. 16                             min:8,
  17. 17                             max:15,
  18. 18                             message: '用户名长度必须在8~15之间'
  19. 19                         }
  20. 20                     }
  21. 21                 }
  22. 22             }
  23. 23         })
  24. 24     })
  25. 25 </script>

2.7 邮箱地址验证 emailAddress

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">邮箱</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="email" id="inputName"
  8.  8                            placeholder="请输入邮箱地址">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 email: {
  14. 14                     validators: {
  15. 15                         emailAddress:{
  16. 16                             message: '请输入正确的邮箱地址'
  17. 17                         }
  18. 18                     }
  19. 19                 }
  20. 20             }
  21. 21         })
  22. 22     })
  23. 23 </script>

2.8 IP地址验证 ip

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">IP</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="ip" id="inputName"
  8.  8                            placeholder="请输入IP地址">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 ip: {
  14. 14                     validators: {
  15. 15                         ip:{
  16. 16                             message: '请输入正确的ip地址'
  17. 17                         }
  18. 18                     }
  19. 19                 }
  20. 20             }
  21. 21         })
  22. 22     })
  23. 23 </script>

2.9 日期格式验证 date

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="birthday" id="inputName"
  8.  8                            placeholder="请输入出生日期">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 birthday: {
  14. 14                     validators: {
  15. 15                         date:{
  16. 16                             format: 'YYYY-MM-DD',
  17. 17                             message: '请输入正确的出生日期'
  18. 18                         }
  19. 19                     }
  20. 20                 }
  21. 21             }
  22. 22         })
  23. 23     })
  24. 24 </script>

2.10 正则验证 regexp

通过正则验证，我们可以定制自己所需要的格式的输入验证。如上面的邮箱地址，或者身份证号或手机号等，我们都可以通过正则表达式来进行验证。

下面为手机号验证代码：

html代码

  1.  1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
  2.  2     <form class="form-horizontal" method="post" action="" id="classes-form">
  3.  3         <div class="box-body">
  4.  4             <div class="form-group">
  5.  5                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">手机号</label>
  6.  6                 <div class="col-sm-8">
  7.  7                     <input type="text" class="form-control" name="phone_num" id="inputName"
  8.  8                            placeholder="请输入手机号">
  9.  9                 </div>
  10. 10             </div>
  11. 11         </div>
  12. 12     </form>
  13. 13 </div>

js验证代码

  1.  1 <script>
  2.  2     $(function () {
  3.  3         $('#classes-form').bootstrapValidator({
  4.  4             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
  5.  5             // disabled和submitted代表当点击提交按钮时触发验证
  6.  6 
  7.  7             feedbackIcons: {  //显示表单验证结果的图标
  8.  8                 valid: 'glyphicon glyphicon-ok',
  9.  9                 invalid: 'glyphicon glyphicon-remove',
  10. 10                 validating: 'glyphicon glyphicon-refresh'
  11. 11             },
  12. 12             fields: {
  13. 13                 phone_num: {
  14. 14                     validators: {
  15. 15                         regexp:{
  16. 16                             regexp: /^1[3-9][\d]{9}$/,  //正则规则用两个/包裹起来
  17. 17                             message: '请输入正确的手机号'
  18. 18                         }
  19. 19                     }
  20. 20                 }
  21. 21             }
  22. 22         })
  23. 23     })
  24. 24 </script>

3.总结

以上为经常会用到的一些表单验证，若有不正确或需要补充的，欢迎指出。

想了解更多bootStrapValidator的更多验证，也可以进入 https://github.com/nghuuphuoc/bootstrapvalidator 下载源码学习研究。

 

原文链接：http://www.cnblogs.com/wang-kai-xuan/p/11031733.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号