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 via max and min attributes
  • pattern="Reg(ular )?Exp(ression)?" (for input types of text, search, tel, url or email)
  • required

还支持一些非标准的属性:

  • data-match="#inputToMatch" to ensure two fields match, e.g. password confirmations
  • data-minlength="5" to enforce a minimum amount of characters
  • data-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 a name attribute, as the request will be sent to /path/to/remote/validator?<name>=<value>. The remote endpoint should return a 200 OK if the field is valid, and a 4xx 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:

feedback: {
  success: 'glyphicon-ok',
  error: 'glyphicon-remove'
}
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: {foo: function($el) { return true || false } }

Adding the validator to an input is done just like the others, data-foo="bar".

You must also add default error messages for any custom validators via the errors option.

errors object sensible defaults

Error messages to show for each type of validation. Defaults to:

errors: {
  match: 'Does not match',
  minlength: 'Not long enough'
}

(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使用的更多相关文章

  1. bootstrap validator 出现Maximum call stack size exceeded

    如果用 c# 里面用的是 taghelper 的控件,有可能造成 Maximum call stack size exceeded bootstrap validator  必须是继承  bootst ...

  2. BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法

    最近一直在做互金平台,做到后台提交表单的时候出现验证提交数据一直没有提交的问题.于是百度了一下.果然是版本问题造成的.幸好找到了问题所在.我一直仿照的是东钿原微信平台的做法,但是使用byond的后台框 ...

  3. bootstrap validator 使用 带代码

    如何使用bootstrapVlidator插件? 下载bootstrapVlidator插件 在需要使用的页面引入bootstrapVlidator的js文件和css文件 如: 注: 在此基础之前必须 ...

  4. bootstrap validator html attributes 选项

    常用的html属性:data-fv-message="The username is not valid"data-fv-notempty="true"data ...

  5. Bootstrap Validator使用特性,动态(Dynamic)添加的input的验证问题

    http://1000hz.github.io/bootstrap-validator/#validator-usage Validated fields By default, the valida ...

  6. Edusoho 的 Arale validator使用说明

    1.js控制器文件开端 var Validator = require('bootstrap.validator'); require('common/validator-rules').inject ...

  7. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  8. Bootstrap 可视化HTML编辑器,summernote

    Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中 ...

  9. bootstrap bootstrapvalidator插件+adjax验证使用

    1.利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS. <link rel="stylesheet" type="text/css ...

  10. 前端打包构建工具grunt快速入门(大篇幅完整版)

    打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...

随机推荐

  1. iOS开发技巧系列---详解KVC(我告诉你KVC的一切)

    KVC(Key-value coding)键值编码,单看这个名字可能不太好理解.其实翻译一下就很简单了,就是指iOS的开发中,可以允许开发者通过Key名直接访问对象的属性,或者给对象的属性赋值.而不需 ...

  2. java spring 使用注解来实现缓存

    这里举例使用spring3.1.4 + ehcache 注解的方式使用cache 是在spring3.1加入的 使用方法: 1.ehcache依赖+spring依赖 <!-- ehcache依赖 ...

  3. 简化版可用于多线程的logger

    logger 嘛要高效,要简单.废话不多话. GitHub 地址 https://github.com/goldli/logger 本文所说的logger使用System.Logger做为NameSp ...

  4. Python_爬虫1

    Urllib库的基本使用 那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的 ...

  5. mysql的二级索引

    mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...

  6. c语言_帮助别人

    1. /*4.找出一个二维数组中的鞍点,即该位置上的元素在该行上最大.在该列上最小,也可能没有鞍点*/ #include<stdio.h> int main() { int i,j,max ...

  7. Mac Yosemite OS10.10 Apache 虚拟主机设置

    昨天睡觉前开始挂机下载OS10.10 Yosemite,早上6点半就很兴奋地起来安装新系统了.安装完成后打开界面,感觉真的大不一样了,很优很美,很喜欢. 在下载各种更新,体验各种新功能的同时,我也不忘 ...

  8. InvocationTargetException

    在使用反射的适合,调用的方法无论抛出什么异常,都会变成InvocationTargetException,要想得到原始的异常,必须使用getTargetException()

  9. ‘初始化锁相环INIT_PLL()’

    在XS128的SCI学习的过程中,INIT_PLL()显得很重要,初始化锁相环几乎在每个程序中都有,今天看的程序-初始化锁相环的相关代码如下: /*************************** ...

  10. 大表 update 方式

    -- declare cursor cur_t is ; type tab_t is table of urowid index by binary_integer; l_rid tab_t; beg ...