FormValidation学习

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

• 文档分析：

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

• 语言包的使用

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

   <!-- Bootstrap CSS v3.0.0 or higher -->
   <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
   
   <!-- FormValidation CSS file -->
   <link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
   
   <!-- jQuery v1.9.1 or higher -->
   <script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
   
   <!-- Bootstrap JS -->
   <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
   
   <!-- FormValidation plugin and the class supports validating Bootstrap form -->
   <script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
   <script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>
   
   

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

2. 写验证表单
   如果你的表单没有按照规定格式写的话，chrome浏览器会报错：
   <pre>
   Uncaught RangeError: Maximum call stack size exceeded
   </pre>

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

3. 调用插件
   像下面一样调用插件去验证表单：

   $(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: ...
       });
   })
   

   例如，验证一个包含username和password的表单，应该类似如下调用插件：

$(document).ready(function() {
$('#signinForm').formValidation({
// I am validating Bootstrap form
framework: 'bootstrap',

    // Feedback icons
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },

    // List of fields and their validation rules
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: 'The username is required and cannot be empty'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_]+$/,
                    message: 'The username can only consist of alphabetical, number and underscore'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and cannot be empty'
                }
            }
        }
    }
});

});
```