云平台项目--学习经验--BootstrapValidate表单验证插件
使用前提,需要加载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表单验证插件的更多相关文章
- 云平台项目--学习经验--打包压缩工具requirejs
requirejs是一个JavaScript模块加载器.适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化.使用RequireJS加载模块化脚本将提高代码的加载速度和质量.如何加载R ...
- 云平台项目--学习经验--jsrender前端渲染模板
jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...
- 云平台项目--学习经验--回调函数中call和apply
Js中可以通过call和apply来代替另一个对象调用一个方法,将一个函数对象上下文从初始上下文改变为thisObj指定的新对象.简而言之,改变函数执行的上下文,而call和apply的基本区别在于他 ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- BootStrapValidator表单验证插件的学习和使用
BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
随机推荐
- NOIP模拟赛-2018.11.5
NOIP模拟赛 好像最近每天都会有模拟赛了.今天从高二逃考试跑到高一机房,然而高一也要考试,这回好像没有拒绝的理由了. 今天的模拟赛好像很有技术含量的感觉. T1:xgy断句. 好诡异的题目,首先给出 ...
- BZOJ2460:[BJWC2011]元素(贪心,线性基)
Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔法矿石炼制法杖的技术.那时人们就认识到,一个法杖的法力取决于使用的矿石. 一般地,矿石越多则法力越 ...
- 微信支付的notify.php中如何获取订单号(php版)
不要直接使用demo中的notify.php,重写notify.php,继承WxPayNotify(可参考微信api),具体如下: require_once "WxPay.Api.php&q ...
- 利用单例模式设计数据库连接Model类
之前在<[php]利用php的构造函数与析构函数编写Mysql数据库查询类>(点击打开链接)写过的Mysql数据库查询类还不够完美,利用<[Java]单例模式>(点击打开链接) ...
- linux 的常用命令---------第二阶段
vim编辑器 vim 文件名(首先进入命令模式) :(进行编辑文件内容) → 按 i 键进入插入模式,可以写内容啦. ↓ 按 Esc 键,进入命令模式 ↓ 按 shift + : 键,进入末行模式 ...
- docker swarm英文文档学习-7-在集群中管理节点
Manage nodes in a swarm在集群中管理节点 List nodes列举节点 为了查看集群中的节点列表,可以在管理节点中运行docker node ls: $ docker node ...
- 2018-2019-2 20165302 Exp5 MSF基础应用
1.实验目的 掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路 2.实验内容 一个主动攻击实践; (1分) MS17-010 一个针对浏览器的攻击:(1分) ms14_064 一个 ...
- day44
今日内容: 1.前端概述 2.前端三剑客 3.页面基本结构 4.常用标签 5.标签分类 1.前端概述与前端三剑客 前端即⽹站前台部分,运⾏在PC端,移动端等浏览器上展现给⽤户浏览的⽹⻚.随着互联⽹技术 ...
- Android导入AS工程
AS 导入工程 还得 新建工程贴代码
- ajax入门简述
ajax 全称为 “Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),是一种创建交互式网页应用的网页开发技术,本质上是一个浏览器端的技术,就是 ...