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 ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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 日期加减的类,很不错
2009/10/10 PHP
php 数组的一个悲剧?
2011/05/11 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Oracle性能调优原则
2012/05/03 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
现场施工员岗位职责
2014/03/10 职场文书
分公司经理任命书
2014/06/05 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2016年春节慰问信息
2015/03/25 职场文书
各种货币符号快捷输入
2022/02/17 杂记