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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
解决layui的input独占一行的问题
2019/09/10 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python爬取个性签名的方法
2018/06/17 Python
Python3几个常见问题的处理方法
2019/02/26 Python
简单了解Python3里的一些新特性
2019/07/13 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
介绍Java的内部类
2012/10/27 面试题
成教毕业生自我鉴定
2013/10/23 职场文书
初中物理教学反思
2014/01/14 职场文书
春季防火方案
2014/05/10 职场文书
顶岗实习协议书
2015/01/29 职场文书
学生会主席任命书
2015/09/21 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技