bootstrap-validator使用
bootstrap-validator是一款与bootstrap相结合的表单前端验证模块,官方网址:http://1000hz.github.io/bootstrap-validator/
下面内容大部分是从该官方网站翻译过来的。
1、要包含的js文件
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/validator.min.js"></script>
2、实例与说明
<form data-toggle="validator" role="form"><!--data-toggle表示该表单要应用验证模块--> <div class="form-group"> <label for="inputName" class="control-label">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required> </div> <div class="form-group has-feedback"> <label for="inputTwitter" class="control-label">Twitter</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required> </div><!--应用正则表达式、最大长度限制、必填限制--> <span class="glyphicon form-control-feedback" aria-hidden="true"></span> <span class="help-block with-errors">Hey look, this one has feedback icons!</span><!--错误提示信息显示的位置--> </div> <div class="form-group"> <label for="inputEmail" class="control-label">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="that email address is invalid" required><!--错误提示语--> <div class="help-block with-errors"></div> </div> <div class="form-group"> <label for="inputPassword" class="control-label">Password</label> <div class="form-group col-sm-6"> <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required> <span class="help-block">Minimum of 6 characters</span> </div> <div class="form-group col-sm-6"> <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required><!--应用输入框要一致的限制--> <div class="help-block with-errors"></div> </div> </div> </div> <div class="form-group"> <div class="radio"> <label> <input type="radio" name="underwear" required> Boxers </label> </div> <div class="radio"> <label> <input type="radio" name="underwear" required> Briefs </label> </div> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" id="terms" data-error="Before you wreck yourself" required> Check yourself </label> <div class="help-block with-errors"></div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
2、效果图:
自动提示出错信息;
对应的表单边框会变色,显示√和×;
在输入不满足条件的情况下,提交按钮自动为disable状态
3、使用说明
(1)有两种方法将校验和表单结合起来。一种是将 data-toggle="validator"
加入到form的属性中
<form role="form" data-toggle="validator">
...
</form>
或者使用JavaScript语句
$('#myForm').validator()
(2)input输入框支持标准 HTML5属性验证
type="email"
type="url"
type="number"
, with additional constraints viamax
andmin
attributespattern="Reg(ular )?Exp(ression)?"
(for input types oftext
,search
,tel
,url
oremail
)required
还支持一些非标准的属性:
data-match="#inputToMatch"
to ensure two fields match, e.g. password confirmationsdata-minlength="5"
to enforce a minimum amount of charactersdata-remote="/path/to/remote/validator"
to make an AJAX request to determine if the field is valid or not. Be sure to give the input aname
attribute, as the request will be sent to/path/to/remote/validator?<name>=<value>
. The remote endpoint should return a200 OK
if the field is valid, and a4xx
otherwise. Here's a reference server implementation using Express.
(3)跨浏览器支持:Because this plugin depends on the HTML5 Constraint Validation API, Internet Explorer 9 and older are not supported. If you need to support these browsers, you must add a polyfill like Ryan Seddon's H5F.
(4)为了显示错误信息,需要在input输入框之后添加一个<div>,该div的属性为 help-block
、 with-errors
.
<form role="form" data-toggle="validator">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail">
<div class="help-block with-errors"></div>
</div>
</form>
(5)Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-delay=""
.
Name | type | default | description |
---|---|---|---|
delay | number | 500 | Number of milliseconds to wait before displaying an error on a form field. |
html | boolean | false | Insert HTML into the error messages. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
disable | boolean | true | Disable the submit button until the form is valid and all required fields are complete. |
feedback | object | glyphicon classes |
Override the classes used for form feedback icons. Defaults to Bootstrap's glyphicons:
|
custom | object | {} |
Add custom validators to be run. Validators should be functions that receive the jQuery element as an argument and return a truthy or falsy value based on the validity of the input. Object structure is: Adding the validator to an input is done just like the others, You must also add default error messages for any custom validators via the |
errors | object | sensible defaults |
Error messages to show for each type of validation. Defaults to:
|
(6)自定义错误信息: data-match-error=""
或者 data-error=""
(7)Methods
$().validator(options)
Attaches a validator to a form collection.
$().validator('validate')
Immediately validates the entire form.
$().validator('destroy')
Destroys form validator and cleans up data left behind.
(8)Events
All events are fired on the form element and provide a reference to the form field to which the event pertains via event.relatedTarget
.
Event Type | Description |
---|---|
validate.bs.validator | This event fires immediately when a form field is validated. |
invalid.bs.validator | This event is fired when a form field becomes invalid. Field errors are provided via event.detail . |
valid.bs.validator | This event is fired when a form field becomes valid. Previous field errors are provided via event.detail . |
validated.bs.validator | This event is fired after a form field has been validated. |
Conditionally handling the submit event
When the form is invalid, .preventDefault()
is called on the submit event. As a result, if you want to hook into the submit event and do something conditionally based on whether or not the form was valid, you can check if the event .isDefaultPrevented()
. Be sure your submit handler is bound after the plugin has been initialized on your form.
$('#form').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
})
bootstrap-validator使用的更多相关文章
- bootstrap validator 出现Maximum call stack size exceeded
如果用 c# 里面用的是 taghelper 的控件,有可能造成 Maximum call stack size exceeded bootstrap validator 必须是继承 bootst ...
- BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
最近一直在做互金平台,做到后台提交表单的时候出现验证提交数据一直没有提交的问题.于是百度了一下.果然是版本问题造成的.幸好找到了问题所在.我一直仿照的是东钿原微信平台的做法,但是使用byond的后台框 ...
- bootstrap validator 使用 带代码
如何使用bootstrapVlidator插件? 下载bootstrapVlidator插件 在需要使用的页面引入bootstrapVlidator的js文件和css文件 如: 注: 在此基础之前必须 ...
- bootstrap validator html attributes 选项
常用的html属性:data-fv-message="The username is not valid"data-fv-notempty="true"data ...
- Bootstrap Validator使用特性,动态(Dynamic)添加的input的验证问题
http://1000hz.github.io/bootstrap-validator/#validator-usage Validated fields By default, the valida ...
- Edusoho 的 Arale validator使用说明
1.js控制器文件开端 var Validator = require('bootstrap.validator'); require('common/validator-rules').inject ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- Bootstrap 可视化HTML编辑器,summernote
Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中 ...
- bootstrap bootstrapvalidator插件+adjax验证使用
1.利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS. <link rel="stylesheet" type="text/css ...
- 前端打包构建工具grunt快速入门(大篇幅完整版)
打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...
随机推荐
- WEB服务器、应用程序服务器、HTTP服务器区别(转)
WEB服务器.应用程序服务器.HTTP服务器有何区别?IIS.Apache.Tomcat.Weblogic.WebSphere都各属于哪种服务器,这些问题困惑了很久,今天终于梳理清楚了: Web服务器 ...
- 构建千万级web访问架构
. HTML静态化 其实大家都知道,效率最高.消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法.但是对于大量内容并且频繁 ...
- spring源码分析之spring-web web模块分析
0 概述 spring-web的web模块是更高一层的抽象,它封装了快速开发spring-web需要的基础组件.其结构如下: 1. 初始化Initializer部分 1.1 Servlet3.0 的 ...
- 英文破折号(em dash)、连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?
英文破折号(em dash).连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?在科技写作中有何特点? 2 条评论 分享 按票数排序按时间排序 6 个回答 赞同85反对, ...
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- 快餐店运行模拟C++程序源码代写
某快餐店供应若干种快餐和饮料(5种以上),早晨6:00开始营业,晚上11:00打烊.前一天已经安排了若干工人上班,快餐店的用餐位是固定的,每种食物的成本和销售价格是确定的,每种食物的总量是确定的,储存 ...
- windows下使用VirtualEnv
在开发Python应用程序的时候,有时会开发多个应用程序,那这些应用程序都会共用一个Python.如果应用A需要jinja 2.7,而应用B需要jinja 2.6怎么办?这种情况下,每个应用可能需要各 ...
- appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...
- Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果
Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...
- Scala的基本语法总结
Scala的函数: 目前博客园中的代码编辑器中还不支持Scala语言....用的Java代码的存储方式 object TestScala { def main(args: Array[String]) ...