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 相关文章推荐
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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
如何做到多笔资料的同步
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
php格式文件打开的四种方法
2018/02/24 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
原生js实现弹窗消息动画
2020/11/20 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python基于socket函数实现端口扫描
2020/05/28 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
员工自我鉴定
2013/10/09 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
小学音乐课教学反思
2016/02/18 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
python批量创建变量并赋值操作
2021/06/03 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript