使用前提,需要加载jquery和bootstrap库。
并且引入bootstrapValidator.js和bootstrapValidator.css文件
然后建立一个form表单,添加表单控件,表单控件需要有绝对定位。不然会报错
例如:
<form class="form-horizontal clearfix" onsubmit="return false">
  <div class="form-group col-sm-12 col-md-12">
    <label for="discuss_editor_item_text" class="col-sm-2 col-md-2 control-label">评论内容:</label>
      <div class="col-sm-10 col-md-10">
        <textarea id="discuss_editor_item_text" class="form-control" name="text" rows="8">{{:text}}</textarea>
        <p class="help-block"></p>
      </div>
  </div>
</form>
js部分编写文件如下:
setValidator:function() {
  $('form',‘#discuss_editor’).bootstrapValidator({
  message:'必须填写',//不满足条件时的提示消息
  feedbackIcons: { //根据验证结果显示出来的各种图标
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
fields:{
  text:{
    validators:{
      notEmpty:{}, //检测非空
      stringLength: { //检测长度
        max: 3000,
        utf8Bytes: true,
        message: "不能超过1000字"
        }
      }
    }
  }
})
}
validate: function() {
  $('form', ‘#discuss_editor’).data('bootstrapValidator').validate();
  return $('form', ‘#discuss_editor’).data('bootstrapValidator').isValid();
}
*******************************
*验证部分要有form-group包裹 
*input要有class="form-control"
*name属性规定验证机制的名字 
*******************************
除了检测是否空值和长度以外,还有很多种检测如regexp(正则检测)、remote(将内容发送到指定页面检测)、different(与指定的文本框比较内容)、emailAddress(email地址检测)等等,具体可参考http://bootstrapvalidator.votintsev.ru/settings/ 官网

云平台项目--学习经验--BootstrapValidate表单验证插件的更多相关文章

  1. 云平台项目--学习经验--打包压缩工具requirejs

    requirejs是一个JavaScript模块加载器.适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化.使用RequireJS加载模块化脚本将提高代码的加载速度和质量.如何加载R ...

  2. 云平台项目--学习经验--jsrender前端渲染模板

    jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...

  3. 云平台项目--学习经验--回调函数中call和apply

    Js中可以通过call和apply来代替另一个对象调用一个方法,将一个函数对象上下文从初始上下文改变为thisObj指定的新对象.简而言之,改变函数执行的上下文,而call和apply的基本区别在于他 ...

  4. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  5. BootStrapValidator表单验证插件的学习和使用

    BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...

  6. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  7. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  8. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  9. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

随机推荐

  1. Spark项目之电商用户行为分析大数据平台之(十)IDEA项目搭建及工具类介绍

    一.创建Maven项目 创建项目,名称为LogAnalysis 二.常用工具类 2.1 配置管理组建 ConfigurationManager.java import java.io.InputStr ...

  2. Block abstraction view(Create & Reference)

    在hierarchical design 中,一般需要调用 hard macro,top调用 macro 的方法有多种: 1. 调用macro对应的db 2. 调用 macro 的 ilm 模型(20 ...

  3. 编写简易的JS输入框模糊查询匹配(附有源码和demo)

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  4. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  5. C++之构造函数拷贝

    拷贝构造函数,顾名思义,就是通过拷贝对象的方式创建一个新对象.拷贝构造函数有两种原型(我们继续以book类来说明拷贝构造函数原型): book(book &b); book(const boo ...

  6. less初识

    一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以 ...

  7. 大数据入门第二十天——scala入门(二)scala基础02

    一. 类.对象.继承.特质 1.类 Scala的类与Java.C++的类比起来更简洁 定义: package com.jiangbei //在Scala中,类并不用声明为public. //Scala ...

  8. 【php增删改查实例】第五节 - easyUI的基本使用

    1. 列表组件 datagrid 1.1 创建一个grid.html <html> <head> <meta charset="utf-8" /> ...

  9. [APIO2013]机器人[搜索、斯坦纳树]

    题意 题目链接 分析 记 g(d,x,y) 表示从 (x,y) 出发,方向为 d 到达的点,这个可以通过记忆化搜索求出,注意如果转移成环(此时向这个方向走没有意义)要特判. 记 f(l,r,x,y) ...

  10. 移动端效果之ScrollList

    写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑.之前手机端之前一直使用的IScroll,但是IScroll本身其实有很多兼容性BUG,想改动一下需 ...