学这个博主的：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. javaweb开发中的常见错误

    Javaweb中的最常见错误及其解决方法 1.200:表示成功处理业务. 2.400 请求出错: 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就 无法重复此请求. 解决办法:,遇到400 ...

  2. kafka学习（四）kafka安装与命令行调用

    文章更新时间:2020/06/07 一.安装JDK 过程就不过多介绍了... 二.安装Zookeeper 安装过程可以参考此处~ 三.安装并配置kafka Kafka下载地址  http://kafk ...

  3. TP6 数据库管理工具，生成前后台CRUD页面

    Tp6 数据库管理工具,数据库内容的搬运工 支持MySQL数据库,可视化配置直接生成前后台CRUD页面减少重复劳动,可以直接作为后台页面使用.前端页面技术基于 iszsw/surface 支持多表关联 ...

  4. 安装MySQL和出现的问题解决

    在Windows下安装mysql,注意自己的Windows是32位还是64位. MySQL官网下载地址:https://dev.mysql.com/downloads/mysql/ 下载完之后,解压放 ...

  5. spark textfile rdd 日记

    批量处理模板方法, 核心处理方法为内部方法 def batchProces(sc: SparkContext, locationFlag: Int, minid: Int, maxid: Int, n ...

  6. Ribbon源码分析（二）-- 服务列表的获取和负载均衡算法分析

    上一篇博客(https://www.cnblogs.com/yangxiaohui227/p/12614343.html)分享了ribbon如何实现对http://product/info/这个链接重 ...

  7. Python-组织结构-目录结构、包导入、__init__文件、模块内置变量、* 导入限制

    __pycache__ .pyc文件,中间代码,提升python运行效率 目录 分档和归类 Python项目组织结构 包 模块 类 函数.变量 # 层级依次往下都是一对多关系 Python项目目录结构 ...

  8. LeetCode刷题总结-DFS、BFS和回溯法篇

    本文总结LeetCode上有关深度优先搜索(DFS).广度优先搜索(BFS)和回溯法的算法题,推荐刷题总数为13道.具体考点分析如下图: 一.深度优先搜索 1.字符匹配问题 题号:301. 删除无效的 ...

  9. 【Python】数字与运算符

    数据类型与运算符 数字 / 浮点除 // 整数除 ** 乘方 多种混合类型运算数的运算会把整数转换为浮点数 除了 int 和 float,Python也支持其他类型的数字,例如 Decimal 或者 ...

  10. docker启动镜像报错

    docker启动镜像报错: docker: Error response from daemon: driver failed programming external connectivity on ...