学这个博主的：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. Java 13天基础 06天map集合小练习(黑马程序员) 统计字符串中每个字符出现的次数 (经典面试题)

    import java.util.HashMap; import java.util.Map; import java.util.Scanner; /** * 目标 : 输出一个字符串中每个字符出现的 ...

  2. python：一切皆对象

      学过java语言的童鞋都知道,java是一门面向对象语言,其基本思想就是一切皆对象.Python也是一样的,甚至Python将面向对象思想贯彻地更加彻底,因为在Python中,class本身是一个 ...

  3. powerDesiger的学习

    一:简介 二:建立物理模型(正向工程) 1.创建 (1) file->new Model创建需要的物理模型,设置使用的数据库. 2.物理模型的数据库设计 (1)一个物理模型中可以有好几张数据库表 ...

  4. 数据类型-字符串(str)

    1.只要是被单引号,双引号,三引号括起来的,都是字符串类型    2.字符串里面元素:单个字母,单个符号,都称之为一个元素 例如:s='hello!' (6个元素) len(数据)统计数据的长度pri ...

  5. golang开发:select多路选择

    select 是 Golang 中的一个控制结构,语法上类似于switch 语句,只不过select是用于 goroutine 间通信的 ,每个 case 必须是一个通信操作,要么是发送要么是接收,s ...

  6. burp suite 之 intruder(入侵者)

    intruder:包括自动提交请求的功能 登录密码 撞库 注入 脱裤 Fuzz Burp intruder包含四个模块: Target:攻击的网站目标的详情信息 Positions :用来设置攻击类型 ...

  7. NN相关资源（持续更新）

    Iris数据介绍 http://www.cnblogs.com/Belter/p/8831216.html

  8. 中部：执具 | R语言数据分析（北京邮电大学）自整理笔记

    第5章工欲善其事.必先利其器 代码,是延伸我们思想最好的工具. 第6章基础编程--用别人的包和函数讲述自己的故事 6.1编程环境 1.R语言的三段论 大前提:计算机语言程序=算法+数据结构 小前提:R ...

  9. 实验 2:Mininet 实验——拓扑的命令脚本生成

    一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. 三. ...

  10. DoModal 函数的用法

    转载:https://blog.csdn.net/mpp_king/article/details/79707728                        https://www.cnblog ...