BootStrap Validator入门

目录

官网

使用效果

认识bootstrapvalidator

初级用法

简单使用

---

官网

官网http://bootstrapvalidator.com/

源码下载地址https://github.com/nghuuphuoc/bootstrapvalidator

使用效果

 

认识bootstrapvalidator

来看bootstrapvalidator的描述：The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们来看看bootstrapvalidator的代码结构

├── demo
├── dist
│   ├── css
│   └── js
│       └── language
├── screenshots
├── src
│   ├── css
│   └── js
│       ├── language
│       └── validator
├── test
│   └── spec
│       └── validator
└── vendor
    ├── bootstrap
    │   ├── css
    │   ├── fonts
    │   └── js
    ├── jasmine
    └── jquery

demo中是各种用法示例

dist是编译后的结果

screenshot是校验的效果截图

src是源码目录

test是各个校验器的单元测试实现

vender是依赖库，其中bootstrap和jquery是bootstrapvalidator的依赖库，jasmine是单元测试的依赖库

 

初级用法

引入插件

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

<!-- Either use the compressed version (recommended in the production site) -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
<!-- Or use the original one with all validators included -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
<!-- Or use the plugin with required validators -->
<script type="text/javascript" src="/path/to/src/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="/path/to/src/js/validator/...validator..."></script>

<!-- If you want to use the default message translated in the language package, then finally include it-->
<script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script>

如果语言是英文环境，不需要引用语言包，因为默认语言包是英文

由于bootstrapvalidator是基于bootstrap设计的，所以必须使用bootstrap风格的表格

如果不是bootstrap风格表格的话，会报以下错误

// Chrome
Uncaught RangeError: Maximum call stack size exceeded

// Firefox
Too much recursion error

命名注意点：

 submit, reset, length, method不要使用它们给你的表单元素的name或id取值

 

简单使用

<form class="registerForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>

    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>

$(document).ready(function() {
    $('.registerForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                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'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });
});

内置校验器

示例：\demo\validators.html

No.	Name	Description
1	base64	Validate a base64 encoded string
2	between	Check if the input value is between (strictly or not) two given numbers
3	callback	Return the validity from a callback method
4	choice	Check if the number of checked boxes are less or more than a given number
5	creditCard	Validate a credit card number
6	cusip	Validate a CUSIP
7	cvv	Validate a CVV number
8	date	Validate date
9	different	Return true if the input value is different with given field's value
10	digits	Return true if the value contains only digits
11	ean	Validate an EAN (International Article Number)
12	emailAddress	Validate an email address
13	file	Validate file
14	greaterThan	Return true if the value is greater than or equals to given number
15	grid	Validate a GRId (Global Release Identifier)
16	hex	Validate a hexadecimal number
17	hexColor	Validate a hex color
18	iban	Validate an International Bank Account Number (IBAN)
19	id	Validate identification number
20	identical	Check if the value is the same as one of particular field
21	imei	Validate an IMEI (International Mobile Station Equipment Identity)
22	imo	Validate an IMO (International Maritime Organization)
23	integer	Validate an integer number
24	ip	Validate an IP address. Support both IPv4 and IPv6
25	isbn	Validate an ISBN (International Standard Book Number). Support both ISBN 10 and ISBN 13
26	isin	Validate an ISIN (International Securities Identification Number)
27	ismn	Validate an ISMN (International Standard Music Number)
28	issn	Validate an ISSN (International Standard Serial Number)
29	lessThan	Return true if the value is less than or equals to given number
30	mac	Validate a MAC address
31	meid	Validate a MEID (mobile equipment identifier)
32	notEmpty	Check if the value is empty
33	numeric	Check if the value is numeric
34	phone	Validate a phone number
35	regexp	Check if the value matches given Javascript regular expression
36	remote	Perform remote checking via Ajax request
37	rtn	Validate a RTN (Routing transit number)
38	sedol	Validate a SEDOL (Stock Exchange Daily Official List)
39	siren	Validate a Siren number
40	siret	Validate a Siret number
41	step	Check if the value is valid step one
42	stringCase	Check if a string is a lower or upper case one
43	stringLength	Validate the length of a string
44	uri	Validate an URL address
45	uuid	Validate an UUID, support v3, v4, v5
46	vat	Validate VAT number
47	vin	Validate an US VIN (Vehicle Identification Number)
48	zipCode	Validate a zip code