学这个博主的：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、密码必须由数字、字符、特殊字符三种中的两种组成；\n' + '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: '请输入正确的手机号' }, 国内手机号 
 

bootstrapvalidator常用验证解析和使用的更多相关文章

  1. bootstrapValidator常用验证规则总结

    bootstrapValidator常用验证规则总结 一 .bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapVa ...

  2. Apache入门 篇（二）之apache 2.2.x常用配置解析

    一.httpd 2.2.x目录结构 Cnetos 6.10 YUM安装httpd 2.2.x # yum install -y httpd 程序环境 主配置文件: /etc/httpd/conf/ht ...

  3. PHP常用验证正则表达式

    PHP常用验证正则表达式 数字.手机号.QQ号.Url地址合法性校验 1.验证是否为整数 1 function isNumber($val) 2 { 3 if(ereg("^[0-9]+$& ...

  4. 用bootstrapValidator来验证UEditor

    我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只好修修改改咯 首先来看一 ...

  5. Ext 常用组件解析

    Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...

  6. Ionic 常用组件解析

    Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...

  7. Python爬虫beautifulsoup4常用的解析方法总结

    摘要 如何用beautifulsoup4解析各种情况的网页 beautifulsoup4的使用 关于beautifulsoup4,官网已经讲的很详细了,我这里就把一些常用的解析方法做个总结,方便查阅. ...

  8. java后台常用json解析工具问题小结

    若排版紊乱可查看我的个人博客原文地址 java后台常用json解析工具问题小结 这里不细究造成这些问题的底层原因,只是单纯的描述我碰到的问题及对应的解决方法 jackson将java对象转json字符 ...

  9. angular-cli.json配置参数解析，常用命令解析

    1.angular-cli.json配置参数解析 { "project": { "name": "ng-admin", //项目名称 &qu ...

随机推荐

  1. openstack 介绍

    penstack介绍(1)   一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 ...

  2. matlab中的多项式计算

    在做多项式加法的时候需要做多项式扩展.这里将g1扩展到与f等长 多项式的乘积,是两个多项式之和减1, 多项式求导函数:ployder() 先建立两个多项式,再求a的导函数 在计算两个多项式乘积的导函数 ...

  3. git修改未push和已经push的注释信息

    修改还未push的注释: git commit --amend 修改后保存退出. 刚刚push到远端还没有人其他人下载或改动的: git commit --amend1进入修改页面修改注释信息,修改后 ...

  4. Spring事务管理（编码式、配置文件方式、注解方式）

    1.事务(https://www.cnblogs.com/zhai1997/p/11710082.html) (1)事务的特性:acdi (2)事务的并发问题:丢失修改,脏读,不可重复读 (3)事务的 ...

  5. UnityShader学习笔记- Stencil Buffer

    模板测试(Stencil Test)是现代渲染流水线的一环,其中涉及到的就是模板缓冲(Stencil Buffer),模板缓冲可以用来制作物体的遮罩.轮廓描边.阴影.遮挡显示等等效果 目录 Stenc ...

  6. IntegerCache的妙用和陷阱！

    考虑下面的小程序,你认为会输出为什么结果? public class Test {     public static void main(String\[\] args) {         Int ...

  7. Spring Boot 第三弹，一文带你了解日志如何配置？

    前言 日志通常不会在需求阶段作为一个功能单独提出来,也不会在产品方案中看到它的细节.但是,这丝毫不影响它在任何一个系统中的重要的地位. 今天就来介绍一下Spring Boot中的日志如何配置. Spr ...

  8. 与Bat脚本的故事

    因为工作时需要将定时处理的业务抽出来,废弃通过监听定时调用的这种方法,改为通过第三方软件定时执行bat脚本来实现,所以学习了一下bat脚本,整理出一些学习中的基础点和重点. 基础点: (1)bat脚本 ...

  9. MySQL 5.7二进制日志

    简介 二进制日志是MySQL服务器用来记录数据修改事件的,比如INSERT.UPDATE.DELETE等会导致数据发生变化的语句,SELECT语句不会被记录在内.MySQL必须先执行完一条语句才能知道 ...

  10. java安全编码指南之:死锁dead lock

    目录 简介 不同的加锁顺序 使用private类变量 使用相同的Order 释放掉已占有的锁 简介 java中为了保证共享数据的安全性,我们引入了锁的机制.有了锁就有可能产生死锁. 死锁的原因就是多个 ...