bootstrap：能够增加兼容性的强大框架.

因为移动端项目需要数据验证，就开始学习了bootstrapValidator 。

1.需要引用的文件：

css：

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-2.1.4.min.js

bootstrap.min.js

bootstrapValidator.min.js

以及：

fonts文件

2.HTML编写 

在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹

（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。

注：该值不是绝对的，也可以通过js手动指定错误提示位置和验证的输入框（后续会讲解到）。

demo1:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="bootstrap.css">

    <link rel="stylesheet" href="bootstrapValidator.css">

</head>

<style>

</style>

<body>

 <header style="text-align: center;">bootstrapvalidator的使用</header>

     <div class="container">

         <form action="" id="defaultForm" class="form-horizontal">
 <!-- 注意：1，下面这个div，类为form-group必须要有，插件根据这个进行添加提示；
           2,Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现
             水平表单效果，必须满足以下两个条件：
　　            2.1、在<form>元素是使用类名“form-horizontal”
　　            2.2、配合Bootstrap框架的网格系统。
　　           在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
　　                1、设置表单控件padding和margin值。
　　                2、改变“form-group”的表现形式，类似于网格系统的“row”。
           3，form-horizontal和control-label一起使用，可以让label标签的文字右对齐 -->
               <div class="form-group">

                 <label class="col-lg-3 col-sm-3 control-label">UserName:</label>

                <div class="col-lg-5 col-sm-9">

                    <input type="text" class="form-control" name="username">

                </div>

             </div>

             <div class="form-group">

                    <label class="col-lg-3 col-sm-3 control-label">Email address</label>

                    <div class="col-lg-5 col-sm-9">

                        <input type="text" class="form-control" name="email" />

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-lg-3 col-sm-3 control-label">Password</label>

                    <div class="col-lg-5 col-sm-9">

                        <input type="password" class="form-control" name="password" />

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-lg-9 col-lg-offset-3 col-sm-offset-3">

                        <button type="submit" class="btn btn-primary">Sign up</button>

                    </div>

                </div>

         </form>

     </div>

    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>

    <script src='bootstrap.min.js'></script>

    <script src='bootstrapValidator.min.js'></script>

    <script src='demo2.js'></script>

</body>

</html>

js代码如下：

$(function(){

    /**

     * 下面是进行插件初始化

     * 你只需传入相应的键值对

     * */

	$('#defaultForm').bootstrapValidator({

		message:'This value is not valid',

		feedbackIcons:{/*输入框不同状态，显示图片的样式*/

              valid: 'glyphicon glyphicon-ok',

              invalid: 'glyphicon glyphicon-remove',

              validating: 'glyphicon glyphicon-refresh'

		},

		fields:{

			username:{//键名username和input name值对应

				message:'The username is not valid',

				validators:{

					notEmpty:{//非空提示

						message:'用户名不能为空'

					},

					stringLength:{//长度提示

						min:6,

						max:30,

						message:'用户名长度必须在6到30之间'

					},

                    /*以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？

                      如下只要在input相对应的键值中加入一个regexp:{}键值对

                      只需加此键值对，包含正则表达式，和提示

                    */

                    regexp:{

                        regexp:/^[a-zA-Z0-9]+$/,

                        message:'只能是数字和字母'

                    }

				}

			},

			password: {

                    message:'密码无效',

                    validators: {

                        notEmpty: {

                            message: '密码不能为空'

                        },

                        stringLength: {

                            min: 6,

                            max: 30,

                            message: '用户名长度必须在6到30之间'

                        }

                    }

                },

                  email: {

                    validators: {

                        notEmpty: {

                            message: 'The email address is required and can\'t be empty'

                        },

                        emailAddress: {

                            message: 'The input is not a valid email address'

                        }

                    }

                }

            }

	})

})

　　

这是最基本的，例子直接复制到本地，并且导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式。

 

基于jQuery，bootstrap的bootstrapValidator的学习（一)的更多相关文章

  1. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  2. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  3. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 基于jquery的提示框JavaScript 插件，类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  8. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  9. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

随机推荐

  1. [转]浅谈C#中常见的委托

    一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...

  2. fcc筆記

    在 JavaScript 中所有的变量都是大小写敏感的JavaScript提供七种不同的data types(数据类型),它们是undefined(未定义), null(空), boolean(布尔型 ...

  3. 移动端video视频播放问题

    1.视频播放后自动全屏 video添加playsinline  webkit-playsinline属性 2.安卓暂停或播放完毕不能滑动 通过js判断机型,安卓去掉controls属性,ios保留co ...

  4. 【python之路44】tornado的用法 （二）

    参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.代码目录构建 代码目录设置如下图: #!/usr/bin/env python ...

  5. Django项目：CMDB(服务器硬件资产自动采集系统)--10--06CMDB测试Linux系统采集硬件数据的命令05

    cd /py/AutoClient/bin python3 auto-client.py /usr/local/python3/bin/pip install requests python3 aut ...

  6. php缓存技术有哪些（总结）

    php缓存技术有哪些(总结) 一.总结 一句话总结: 静态页面:全页面静态化缓存,页面部分缓存(将页面中不常变动的部分进行静态化缓存), 数据缓存:比如我的每轮的题目数据,商店,寻宝数据等 数据库:查 ...

  7. 【One by one系列】一步步开始使用Redis吧(一)

    One by one,一步步开始使用Redis吧(一) 最近有需求需要使用redis,之前也是随便用用,从来也没有归纳总结,今天想睡觉,但是又睡不着,外面阳光不错,气温回升了,2019年6月1日,成都 ...

  8. 2016年省赛 G Triple Nim

    2016年省赛 G Triple Nimnim游戏,要求开始局面为先手必败,也就是异或和为0.如果n为奇数,二进制下最后一位只有两种可能1,1,1和1,0,0,显然异或和为1,所以方案数为0如果n为偶 ...

  9. Redis源码解析：22sentinel(三)客观下线以及故障转移之选举领导节点

    八:判断实例是否客观下线 当前哨兵一旦监测到某个主节点实例主观下线之后,就会向其他哨兵发送"is-master-down-by-addr"命令,询问其他哨兵是否也认为该主节点主观下 ...

  10. 关于 LVM

    [名词解释] 1. PV(Physical Volume):物理卷,处于LVM最底层,可以是物理硬盘或者分区.     2.PP(Physical Extend):物理区域,PV中可以用于分配的最小存 ...