目录
官网
官网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 └── jquerydemo中是各种用法示例
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 |
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232185.html原文链接：https://javaforall.net
