bootstrapvalidator常用验证解析和使用

学这个博主的：https://www.cnblogs.com/wang-kai-xuan/p/11031733.html

BootStrapValidator表单验证插件的学习和使用

引入标签

     <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
     <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
 //--------------------------------下方都是bootstrap的基本依赖-----------------------
 <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

html

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <!--第一个数值验证-->
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName1" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="price" id="inputName1"
                            placeholder="请输入商品价格">
                 </div>
             </div>
         </div>
         <!--第二个 数值范围验证-->
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName2" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="max_num" id="inputName2"
                            placeholder="请输入10-100之间的值">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证

     <script>
         $(function () {
 
 
             $('#classes-form').bootstrapValidator({
                 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
                 // disabled和submitted代表当点击提交按钮时触发验证
 
                 feedbackIcons: {  //显示表单验证结果的图标
                     valid: 'glyphicon glyphicon-ok',
                     invalid: 'glyphicon glyphicon-remove',
                     validating: 'glyphicon glyphicon-refresh'
                 },
                 fields: {
                     // 第一个验证
                     price: {
                         validators: {
                             numeric: {
                                 message: '价格必须为数值'
                             }
                         }
                     },
                     // 第二个验证
                     max_num: {
                         validators: {
                             lessThan: { //最大值验证
                                 value: 100,
                                 inclusive: false, //是否包含当前值，false不包含，true包含。默认为true
                                 message: '值不能大于或等于100'
                             },
                             greaterThan: {  //最小值验证
                                 value: 10,
                                 inclusive: true,
                                 message: '值不能小于10'
                             }
                         }
                     }
                 }
             });
 
 
         });
 
 
     </script>

注意点：

<div class="form-group"></div> 来包裹才可以生效

整体代码，复制即可用

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>登陆界面</title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
     <script>
         $(function () {
 
 
             $('#classes-form').bootstrapValidator({
                 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
                 // disabled和submitted代表当点击提交按钮时触发验证
 
                 feedbackIcons: {  //显示表单验证结果的图标
                     valid: 'glyphicon glyphicon-ok',
                     invalid: 'glyphicon glyphicon-remove',
                     validating: 'glyphicon glyphicon-refresh'
                 },
                 fields: {
                     // 第一个验证
                     price: {
                         validators: {
                             numeric: {
                                 message: '价格必须为数值'
                             }
                         }
                     },
                     // 第二个验证
                     max_num: {
                         validators: {
                             lessThan: { //最大值验证
                                 value: 100,
                                 inclusive: false, //是否包含当前值，false不包含，true包含。默认为true
                                 message: '值不能大于或等于100'
                             },
                             greaterThan: {  //最小值验证
                                 value: 10,
                                 inclusive: true,
                                 message: '值不能小于10'
                             }
                         }
                     }
                 }
             });
 
 
         });
 
 
     </script>
 </head>
 <body>
 
 
 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <!--第一个数值验证-->
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName1" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="price" id="inputName1"
                            placeholder="请输入商品价格">
                 </div>
             </div>
         </div>
         <!--第二个 数值范围验证-->
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName2" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="max_num" id="inputName2"
                            placeholder="请输入10-100之间的值">
                 </div>
             </div>
         </div>
     </form>
 </div>
 
 </body>
 </html>

常用方法指南：

验证方式	属性	描述
字符串长度验证	tringLength:{ min:2, max:10, message: 'xx长度必须在2~10之间' },	一定范围内
非空	notEmpty:{ message: '不能为空' }	提交之前进行非空验证
正则密码	regexp:{ regexp: /(?!^\d+$)(?![a-zA-Z]+ $You can't use 'macro parameter character #' in math mode).{8,}/, //正则规则用两个/包裹起来 message: '1、密码必须由数字、字符、特殊字符三种中的两种组成； ' + '2、密码长度不能少于8个字符；' },$	密码验证 `不带确认密码`
身份证号	regexp:{ regexp: /^[1-9]d{5}(18\|19\|([23]d))d{2}((0[1-9])\|(10\|11\|12))((0-2)\|10\|20\|30\|31)d{3}[0-9Xx]$/, //正则规则用两个/包裹起来 message: '请输入正确的身份证号码' },	18位身份证号验证
手机号	regexp:{ regexp: /^13-9{9}$/, //正则规则用两个/包裹起来 message: '请输入正确的手机号' },	国内手机号

相关阅读:
springcloud 项目源码微服务分布式 Activiti6 工作流 vue.js html 跨域前后分离
 springcloud 项目源码微服务分布式 Activiti6 工作流 vue.js html 跨域前后分离
 OA办公系统 Springboot Activiti6 工作流集成代码生成器 vue.js 前后分离跨域
 java企业官网源码自适应响应式 freemarker 静态引擎 SSM 框架
 java OA办公系统源码 Springboot Activiti工作流 vue.js 前后分离集成代码生成器
 springcloud 项目源码微服务分布式 Activiti6 工作流 vue.js html 跨域前后分离
 java 视频播放弹幕技术视频弹幕视频截图 springmvc mybatis SSM
最后阶段总结
 第二阶段学习总结
 第一阶段学习总结
原文地址：https://www.cnblogs.com/albertshine/p/13331054.html