validator - 简单实用Bootstrap3表单验证插件

PetitQ 表单/表格 2018-11-11 3.19K 0 3

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?=的方式发送请求。如果通过验证则会返回 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	当一个表单域被验证之后触发