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 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
python学习之编写查询ip程序
2016/02/27 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
高三历史教学反思
2014/01/09 职场文书
小学语文业务学习材料
2014/06/02 职场文书
继承权公证书范本
2015/01/23 职场文书