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打包的常用方法都用实 ...
随机推荐
- iOS开发技巧系列---详解KVC(我告诉你KVC的一切)
KVC(Key-value coding)键值编码,单看这个名字可能不太好理解.其实翻译一下就很简单了,就是指iOS的开发中,可以允许开发者通过Key名直接访问对象的属性,或者给对象的属性赋值.而不需 ...
- java spring 使用注解来实现缓存
这里举例使用spring3.1.4 + ehcache 注解的方式使用cache 是在spring3.1加入的 使用方法: 1.ehcache依赖+spring依赖 <!-- ehcache依赖 ...
- 简化版可用于多线程的logger
logger 嘛要高效,要简单.废话不多话. GitHub 地址 https://github.com/goldli/logger 本文所说的logger使用System.Logger做为NameSp ...
- Python_爬虫1
Urllib库的基本使用 那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的 ...
- mysql的二级索引
mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...
- c语言_帮助别人
1. /*4.找出一个二维数组中的鞍点,即该位置上的元素在该行上最大.在该列上最小,也可能没有鞍点*/ #include<stdio.h> int main() { int i,j,max ...
- Mac Yosemite OS10.10 Apache 虚拟主机设置
昨天睡觉前开始挂机下载OS10.10 Yosemite,早上6点半就很兴奋地起来安装新系统了.安装完成后打开界面,感觉真的大不一样了,很优很美,很喜欢. 在下载各种更新,体验各种新功能的同时,我也不忘 ...
- InvocationTargetException
在使用反射的适合,调用的方法无论抛出什么异常,都会变成InvocationTargetException,要想得到原始的异常,必须使用getTargetException()
- ‘初始化锁相环INIT_PLL()’
在XS128的SCI学习的过程中,INIT_PLL()显得很重要,初始化锁相环几乎在每个程序中都有,今天看的程序-初始化锁相环的相关代码如下: /*************************** ...
- 大表 update 方式
-- declare cursor cur_t is ; type tab_t is table of urowid index by binary_integer; l_rid tab_t; beg ...