bootStrapValidator插件的使用

1.插件的下载和引用

首先要引入bootstrapValidator插件。链接的地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用网页中的插件连接，也可以将源码下载到本地使用。
要使用bootstrapValidator插件，代码中还要除了引入bootstrapValidator插件的js和css外，还要引入jQuery.js和bootStrap的js和css。

<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>

注意：所有的表单控件一定要放到类名为from-group的div内部，验证才会生效。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="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="class_name" id="inputName"

                            placeholder="请输入班级名称">

                 </div>

             </div>

         </div>

     </form>

 </div>

2.bootStrapValidator的常用验证

2.1 非空验证 notEmpty

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="class_name" id="inputName"

                            placeholder="请输入班级名称">

                 </div>

             </div>

         </div>

     </form>

 </div>
 <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="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="class_name" id="inputName"

                            placeholder="请输入班级名称">

                 </div>

             </div>

         </div>

     </form>

 </div>

接着加入验证js代码

 <script>

     $(function () {

         $('#classes-form').bootstrapValidator({

             live : 'submitted', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，

             // disabled和submitted代表当点击提交按钮时触发验证

             feedbackIcons: {  //显示表单验证结果的图标

                  valid: 'glyphicon glyphicon-ok',

                  invalid: 'glyphicon glyphicon-remove',

                 validating: 'glyphicon glyphicon-refresh'

             },

             fields: {

                 class_name: {

                     validators: {

                         notEmpty: {

                             message: '班级名称不能为空'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.2 数值验证 numeric

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="inputName" 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="inputName"

                             placeholder="请输入商品价格">

                 </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: '价格必须为数值'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.3 整数验证 digits

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级人数</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="std_num" id="inputName"

                            placeholder="请输入班级人数">

                 </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: {

                 std_num: {

                     validators: {

                         digits: {

                             message: '价格必须为数值'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.4 最大值和最小值验证 lessThan和greaterThan

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="inputName" 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="inputName"

                            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: {

                 max_num: {

                     validators: {

                         lessThan: { //最大值验证

                             value: 100,

                             inclusive:false, //是否包含当前值，false不包含，true包含。默认为true

                             message: '值不能大于或等于100'

                         },

                         greaterThan: {  //最小值验证

                             value:10,

                             inclusive:true,

                             message: '值不能小于10'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.5 数值范围验证 between

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">年龄</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="age" id="inputName"

                            placeholder="请输入年龄">

                 </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: {

                 age: {

                     validators: {

                         between:{

                             max:60,

                             min:18,

                             message: '年龄必须在18~60之间'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.6 字符串长度验证 stringLength

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">用户名</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="age" id="inputName"

                            placeholder="请输入用户名">

                 </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: {

                 age: {

                    validators: {

                         stringLength:{

                             min:8,

                             max:15,

                             message: '用户名长度必须在8~15之间'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.7 邮箱地址验证 emailAddress

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">邮箱</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="email" id="inputName"

                            placeholder="请输入邮箱地址">

                 </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: {

                 email: {

                     validators: {

                         emailAddress:{

                             message: '请输入正确的邮箱地址'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.8 IP地址验证 ip

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">IP</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="ip" id="inputName"

                            placeholder="请输入IP地址">

                 </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: {

                 ip: {

                     validators: {

                         ip:{

                             message: '请输入正确的ip地址'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.9 日期格式验证 date

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="birthday" id="inputName"

                            placeholder="请输入出生日期">

                 </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',

             },

             fields: {

                 birthday: {

                     validators: {

                         date:{

                             format: 'YYYY-MM-DD',

                             message: '请输入正确的出生日期'

                         }

                     }

                 }

             }

         })

     })

 </script>

2.10 正则验证 regexp

通过正则验证，我们可以定制自己所需要的格式的输入验证。如上面的邮箱地址，或者身份证号或手机号等，我们都可以通过正则表达式来进行验证。

下面为手机号验证代码：

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="inputName" class="col-sm-2 col-sm-offset-1 control-label">手机号</label>

                 <div class="col-sm-8">

                     <input type="text" class="form-control" name="phone_num" id="inputName"

                            placeholder="请输入手机号">

                 </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: {

                 phone_num: {

                     validators: {

                         regexp:{

                             regexp: /^1[3-9][\d]{9}$/,  //正则规则用两个/包裹起来

                             message: '请输入正确的手机号'

                         }

                     }

                 }

             }

         })

     })

 </script>

3.总结

以上为经常会用到的一些表单验证，若有不正确或需要补充的，欢迎指出。

想了解更多bootStrapValidator的更多验证，也可以进入 https://github.com/nghuuphuoc/bootstrapvalidator 下载源码学习研究。

bootStrap表单验证插件的使用的更多相关文章

  1. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  2. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  3. bootstrapValidator.js，最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  4. 表单验证插件--formvalidation

    表单验证是一个非常基础的功能,当你的表单项少的时候,可以自己写验证,但是当你的表单有很多的时候,就需要一些验证的插件.今天介绍一款很好用的表单验证插件,formvalidation.其前身叫做boot ...

  5. bootstrapValidator表单验证插件

    bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...

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

    BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  9. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

随机推荐

  1. 主从复制系列B

    从服务器靠中继日志来接收从主服务器上传回来的日志.并依靠状态文件来记录已经从主服务器接收了哪些日志,已经恢复了哪些日志. 中继日志与二进制日志的格式相同,并且可以用mysqlbinlog读取.SQL线 ...

  2. VitualBox虚拟机安装CentOS， shell模式与图形化界面的相互切换

    方法一:永久切换 # vi /etc/inittab 编辑 init 5 为 init 3,重启就自动进入控制台方式:反之桌面模式 方法二:当前有效 桌面模式切换shell模式:Ctrl + Alt ...

  3. 把char[]数组里面的内容用MessageBox显示出来

    const char *q; q = mysql_get_client_info();  //获得一字符串指针 CString p(q); AfxMessageBox(p);

  4. LINUX超级用户（权限）在系统管理中的作用

    1.对任何文件.目录或进程进行操作: 但值得注意的是这种操作是在系统最高许可范围内的操作:有些操作就是具有超级权限的root也无法完成: 比如/proc 目录,/proc 是用来反应系统运行的实时状态 ...

  5. TZOJ 5962 Happy Matt Friends(计数DP)

    描述 Matt hzs N friends. They are playing a game together. Each of Matt’s friends has a magic number. ...

  6. Luogu P2764 最小路径覆盖问题(二分图匹配)

    P2764 最小路径覆盖问题 题面 题目描述 «问题描述: 给定有向图 \(G=(V,E)\) .设 \(P\) 是 \(G\) 的一个简单路(顶点不相交)的集合.如果 \(V\) 中每个顶点恰好在 ...

  7. Leetcode520Detect Capital检测大写字母

    给定一个单词,你需要判断单词的大写使用是否正确. 我们定义,在以下情况时,单词的大写用法是正确的: 全部字母都是大写,比如"USA". 单词中所有字母都不是大写,比如"l ...

  8. 前端（Node.js）（3）-- Node.js实战项目开发:“技术问答”

    1.Web 与 Node.js 相关技术介绍 1.1.Web应用的基本组件 web应用的三大部分 brower(GUI)<==>webserver(business logic.data ...

  9. JavaScript中用var和不用var的区别

    Javascript声明变量的,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. varnum=1; 是在当前域中声 ...

  10. 使用Jedis操作Redis-使用Java语言在客户端操作---对key的操作

    //添加String类型的模拟数据. jedis.set("mykey", "2"); jedis.set("mykey2", " ...