zoukankan html css js c++ java

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: '请输入正确的手机号' },	国内手机号

查看全文

相关阅读:
sqlldr、sqluldr2_w64案例
 查看oracle的sid和sevice_name
杂记
 GAN学习
 Leetcode 第 217 场周赛
 牛客编程巅峰赛S2第4场
 SAR图像变化检测的一点想法
 Fire! UVA
HDU
HDU

原文地址：https://www.cnblogs.com/albertshine/p/13331054.html