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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
微信小程序实现轮播图效果
Sep 07 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 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
JAVA/JSP学习系列之二
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python实现列表的排序方法分享
2019/07/01 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python 装饰器重要在哪
2021/02/14 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
竞选村长演讲稿
2014/04/28 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
小学生作文批改评语
2014/12/25 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
公司管理制度范本
2015/08/03 职场文书
初中化学教学反思
2016/02/22 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL