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打包的常用方法都用实 ...
随机推荐
- 不会内存溢出的Android Handler写法
private static class ThisHandler extends Handler { private final WeakReference<MainActivity&g ...
- LINUX 内核导论
http://blog.csdn.net/ljy1988123/article/category/1490573/2
- Apache 学习笔记(心得)
http://blog.csdn.net/btbtd/article/details/288027#2 # 分类:# 01.常规设置# 02.虚拟主机# 03.<Directory> + ...
- C#_自动化测试 (四) 自动卸载软件
在平常的测试工作中,经常要安装软件,卸载软件, 即繁琐又累. 安装和卸载完全可以做成自动化. 安装软件我们可以通过自动化框架,自动点击Next,来自动安装. 卸载软件我们可以通过msiexec命 ...
- php中var_export与var_dump的区别分析
一 var_dump (PHP 3 >= 3.0.5, PHP 4, PHP 5) var_dump -- 打印变量的相关信息 描述 void var_dump ( mixed expressi ...
- 解决iphone横屏时字体变大问题或者内容大小不一样等
在样式表中增加: @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}} @media scr ...
- 下了个C-Free,结果点新建,出来的就是.cpp 怎么变成.c呢。。。他默认新建文件是c++的啊,
C-Free主界面--->工具--->环境选择--->一般--->“新建文件类型”将cpp改成c即可
- cocos2d-x lua 使用http(下载图片, POST JSON)
cocos2d-x lua 使用http(下载图片, POST JSON) version: cocos2d-x 3.6 1.使用http post json与服务器交互 require(" ...
- 4D数据介绍
转自青椒炒蛋:http://www.smallleafs.com/article/35.aspx 4D数据包括DLG(数字线画地图).DEM(数字高程模型).DOM(数字正射影像地图).DRG(数字栅 ...
- 实现struts2框架
Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标签库以及面向对象的技术水准.最初的 ...