FormValidation表单验证

工作中经常会遇到各种表单字段验证，今天介绍一下，方便好用的FormValidation，

1）首先看一下FormValidation的官方文档结构：

formvalidation/
├── dist
│   ├── css
│   │   └── formValidation(.min).css
│   │
│   └── js
│       ├── framework
│       │   ├── bootstrap(.min).js
│       │   ├── foundation(.min).js
│       │   ├── pure(.min).js
│       │   ├── semantic(.min).js
│       │   └── uikit(.min).js
│       │
│       ├── language
│       │   ├── de_DE.js
│       │   ├── en_US.js
│       │   └── ...
│       │
│       ├── formValidation(.min).js
│       └── formValidation.popular(.min).js
│
└── src
    ├── css
    │   └── formValidation.css
    │
    └── js
        ├── framework
        │   ├── bootstrap.js
        │   ├── foundation.js
        │   ├── pure.js
        │   ├── semantic.js
        │   └── uikit.js
        │
        ├── language
        │   ├── de_DE.js
        │   ├── en_US.js
        │   └── ...
        │
        ├── validator
        │   ├── base64.js
        │   ├── between.js
        │   ├── callback.js
        │   └── ...
        │
        ├── base.js     // The main plugin source file containing the base class
        └── helper.js   // Helper class

2）文档分析

1. src路径由原始文件组成，dist路径则由压缩的各个文件组成。
2. src/js/validator路径由多个内置验证组成，而dist/js/formValidation(.min.).js包含了所有的内置验证，dist/js/formValidation。popular(.min.).js只包含大部分流行的验证。
3. src/language和dist/language为语言包

3）引用：

默认的库包含在了vendor路径下，并且jQuery版本要求 V1.9.1 或以上。

值得注意的是： bootstrap官方的 bootstrap(.min.)js 与formvalidation官方的 bootstrap(.min.)js 是两个不同的 js 文件。

4）写验证表单
如果你的表单没有按照规定格式写的话，chrome浏览器会报错：

Uncaught RangeError: Maximum call stack size exceeded

• 对于复杂的表单，要使用 row 选项
• 但是要注意，不能 submit 按钮使用 name="submit" 或 id="submit"，否则表单不会是验证后再提交。

5）调用插件

$(document).ready(function() {
    $(formSelector).formValidation({
        // Indicate the framework
        // Can be bootstrap, foundation, pure, semantic, uikit
        framework: '...',

        // Other settings
        excluded: ...,
        icon: ...,
        message: 'This value is not valid',
        trigger: null,
        fields: ...
    });
})

例如，我工作遇到的一个多个字段的验证例子：

文章有参考：点击打开链接