bootstrap-validator是一款简单实用的Bootstrap3表单验证jQuery插件。该表单验证插件使用HTML5的data属性来设置验证属性，可以完成所有常用的表单验证功能。它的特点还有：

  • 可以通过data-api和标准的HTML5属性来进行配置。
  • 可以及时通知用户表单输入的错误。
  • 只有在所有的表单验证都通过之后提交按钮才可用。
  • 可自定义错误提示信息。
  • 可自定义验证函数。
  • 可通过Ajax来验证一个表单域。

使用方法

使用该表单验证插件需要引入Bootstrap3的相关依赖文件，以及jQuery和validator.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/validator.js"></script>
HTML结构

DEMO中的表单的HTML结构如下：

<form data-toggle="validator" role="form">
  <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="你输入的不是一个有效的邮件地址！" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" data-toggle="validator" data-minlength="6" 
               class="form-control" id="inputPassword" placeholder="Password" required>
        <span class="help-block">最少需要6个字符</span>
      </div>
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPasswordConfirm" 
               data-match="#inputPassword" 
               data-match-error="两次输入的密码不匹配！" 
               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>
初始化插件

表单验证可以通过标签的data-api属性或JS来完成。你可以在表单<form>元素中添加data-toggle="validator"来使表单自动实现验证功能。

<form role="form" data-toggle="validator">
  ...
</form>

或者通过JavaScript来激活表单验证功能。

$('#myForm').validator()
关于标签

在Bootstrap的官网中提供了一些表单的例子。在使用验证插件的时候需要注意的是，每一个input域都要放在一个有效的.form-group容器中，这样验证的错误信息才能被正确的显示。

验证的规则可以在表单的input元素使用下面的HTML5属性来编写。

  • type="email"
  • type="url"
  • type="number"，另外包含额外的max和min属性。
  • pattern="Reg(ular )?Exp(ression)?"（适用于text, search, tel, url 或 email类型的input域）
  • required

另外还有下面一些非标准的HTML5属性。

  • data-match="#inputToMatch"：确保2个输入域输入的内容相同，例如密码和确认密码。
  • data-minlength="5"：输入的最少字符数。
  • data-remote="/path/to/remote/validator"：通过Ajax请求来验证表单域。要确保input元素带有一个name属性，然后通过/path/to/remote/validator?<name>=<value>的方式发送请求。如果通过验证则会返回200状态码，否则会返回4XX。

要显示错误信息，可以在input域之后添加一个带help-block和with-errors class的div容器。

<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>

配置参数

参数可以通过data属性或JavaScript的方式传入。

参数 类型 默认值 描述
delay number 500 在显示错误信息之前的延迟时间，单位毫秒
html boolean false 是否在错误信息中插入HTML标签
disable boolean true 禁用submit按钮直到所有验证都通过
feedback object glyphicon classes 使用图标来显示验证是否通过。默认使用Bootstrap的glyphicon：
feedback: { success: 'glyphicon-ok', error: 'glyphicon-remove' }
custom object {} 执行自定义的表单验证。验证器将接收jQuery元素作为参数，并返回一个真假值。
对象的结构为: {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 显示的错误信息，默认为：
errors: { match: 'Does not match', minlength: 'Not long enough' }

方法

  • $().validator(options)：为一个表单添加验证。
  • $().validator('validate')：立刻验证整个表单。
  • $().validator('destroy')：销毁表单验证插件。

事件

所有的事件都在表单元素上激活，并通过event.relatedTarget为表单域提供一个于事件相关的引用。

事件类型 描述
validate.bs.validator 当一个表单域被验证的时候触发
invalid.bs.validator 当一个表单域没有通过验证时触发，错误信息通过event.detail提供
valid.bs.validator 当一个表单域通过验证时触发
validated.bs.validator 当一个表单域被验证之后触发

浏览器兼容

由于该表单验证插件依赖于HTML5 Constraint Validation API，所以IE9级以下的IE浏览器无法兼容。如果你需要支持这些浏览器，可以添加Ryan Seddon的H5F。

bootstrap-validator表单验证插件的github地址为：https://github.com/1000hz/bootstrap-validator