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. WEB服务器、应用程序服务器、HTTP服务器区别(转)

    WEB服务器.应用程序服务器.HTTP服务器有何区别?IIS.Apache.Tomcat.Weblogic.WebSphere都各属于哪种服务器,这些问题困惑了很久,今天终于梳理清楚了: Web服务器 ...

  2. 构建千万级web访问架构

    . HTML静态化 其实大家都知道,效率最高.消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法.但是对于大量内容并且频繁 ...

  3. spring源码分析之spring-web web模块分析

    0 概述 spring-web的web模块是更高一层的抽象,它封装了快速开发spring-web需要的基础组件.其结构如下: 1. 初始化Initializer部分 1.1  Servlet3.0 的 ...

  4. 英文破折号(em dash)、连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?

    英文破折号(em dash).连接号(en dash)与连字符(hyphen)的区别及各自用法是什么?在科技写作中有何特点?   2 条评论 分享   按票数排序按时间排序 6 个回答 赞同85反对, ...

  5. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  6. 快餐店运行模拟C++程序源码代写

    某快餐店供应若干种快餐和饮料(5种以上),早晨6:00开始营业,晚上11:00打烊.前一天已经安排了若干工人上班,快餐店的用餐位是固定的,每种食物的成本和销售价格是确定的,每种食物的总量是确定的,储存 ...

  7. windows下使用VirtualEnv

    在开发Python应用程序的时候,有时会开发多个应用程序,那这些应用程序都会共用一个Python.如果应用A需要jinja 2.7,而应用B需要jinja 2.6怎么办?这种情况下,每个应用可能需要各 ...

  8. appendChild()插入节点需注意的问题

    第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...

  9. Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果

    Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...

  10. Scala的基本语法总结

    Scala的函数: 目前博客园中的代码编辑器中还不支持Scala语言....用的Java代码的存储方式 object TestScala { def main(args: Array[String]) ...