BootStrapValidator初使用教程详解


Posted in Javascript onFebruary 10, 2017

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

因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。

bootstrapValidator的github地址

需要引用css:

bootstrap.min.css

bootstrapValidator.min.css

js:

jQuery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

以上这些都是必须的。

先上个简单的例子,只要导入相应的文件可以直接运行:

<!DOCTYPE html>
<html>
<head>
  <title>Using Ajax to submit data</title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="css/bootstrapValidator.css" rel="external nofollow" />
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
  <!-- class都是bootstrap定义好的样式,验证是根据input中的name值 -->
  <form id="defaultForm" method="post" class="form-horizontal" action="aaa.html">
    <!-- 下面这个div必须要有,插件根据这个进行添加提示 -->
    <div class="form-group">
      <label class="col-lg-3 control-label">Username</label>
      <div class="col-lg-5">
        <input type="text" class="form-control" name="username" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-3 control-label">Email address</label>
      <div class="col-lg-5">
        <input type="text" class="form-control" name="email" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-3 control-label">Password</label>
      <div class="col-lg-5">
        <input type="password" class="form-control" name="password" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-9 col-lg-offset-3">
        <button type="submit" class="btn btn-primary">Sign up</button>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript">
  $(document).ready(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之间'
            }/*最后一个没有逗号*/
          }
        },
        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'
            }
          }
        }
      }
    });
  });
</script>
</body>
</html>

当然,以上都是插件写好的规则,如果想自己加匹配规则怎么办呢?

如下只要在input相对应的键值中加入一个regexp:{}键值对(在上面的js基础上修改)

username: {/*键名和input name值对应*/
          message: 'The username is not valid',
          validators: {
            notEmpty: {/*非空提示*/
              message: '用户名不能为空'
            },
            regexp: {/* 只需加此键值对,包含正则表达式,和提示 */
              regexp: /^[a-zA-Z0-9_\.]+$/,
              message: '只能是数字和字母_.'
            },
            stringLength: {/*长度提示*/
              min: 6,
              max: 30,
              message: '用户名长度必须在6到30之间'
            }/*最后一个没有逗号*/
          }
        },

以上所述是小编给大家介绍的BootStrapValidator初使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue实现动态数据绑定
Apr 28 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 #Javascript
You might like
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python cookie反爬处理的实现
2020/11/01 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python