formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器，你也可以通过Bootstrap Validator's APIs写自己的表单验证器。该表单验证插件的可用验证器有：
- between：检测输入的值是否在两个指定的值之间。
- callback：通过回调函数返回验证信息。
- creditCard：验证信用卡格式。
- different：如果输入值和给定的值不同返回
true。 - digits：如果输入的值只包含数字返回
true。 - emailAddress：验证电子邮件格式是否有效。
- greaterThan：如果输入的值大于或等于指定的值返回
true。 - hexColor：验证一个hex格式的颜色值是否有效。
- identical：验证输入的值是否和指定字段的值相同。
- lessThan：如果输入的值小于或等于指定的值返回
true。 - notEmpty：检测字段是否为空。
- regexp：检测输入值是否和指定的javascript正则表达式匹配。
- remote：通过AJAX请求来执行远程代码。
- stringLength：验证字符串的长度。
- uri：验证URL地址是否有效。
- usZipCode：验证美国的邮政编码格式。
这个jQuery表单验证插件还可以和Foundation、Pure、Semantic UI和UIKit一起配合使用。产科下面的效果图。
formvalidation和Bootstrap一起使用：
formvalidation和Foundation一起使用：
formvalidation和Pure一起使用：
formvalidation和UI Kit一起使用：
formvalidation和Semantic UI一起使用：
使用方法
使用这个表单验证插件首先要引入必要的js和css文件。jQuery要求1.9.1+以上的版本。
< script src = "jquery/1.10.2/jquery.min.js" > < link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" >
< script src = "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" > < script type = "text/javascript" src = "../dist/js/bootstrapValidator.js" > < link rel = "stylesheet" href = "../dist/css/bootstrapValidator.css" />
|
HTML结构
该表单验证插件的最基本例子的HTML结果如下：
< form id = "defaultForm" method = "post" class = "form-horizontal" >
< div class = "form-group" >
< label class = "col-lg-3 control-label" >Username < div class = "col-lg-5" >
< input type = "text" class = "form-control" name = "username" />
< div class = "form-group" >
< label class = "col-lg-3 control-label" >Email address < div class = "col-lg-5" >
< input type = "text" class = "form-control" name = "email" />
< div class = "form-group" >
< label class = "col-lg-3 control-label" >Password < div class = "col-lg-5" >
< input type = "password" class = "form-control" name = "password" />
< div class = "form-group" >
< label class = "col-lg-3 control-label" >Retype password < div class = "col-lg-5" >
< input type = "password" class = "form-control" name = "confirmPassword" />
< div class = "form-group" >
< label class = "col-lg-3 control-label" id = "captchaOperation" > < div class = "col-lg-2" >
< input type = "text" class = "form-control" name = "captcha" />
< div class = "form-group" >
< div class = "col-lg-9 col-lg-offset-3" >
< button type = "submit" class = "btn btn-primary" >Sign up |
JAVASCRIPT
在页面加载完毕之后，通过下面的方法来初始化该表单验证插件：
|
配置参数
该表单验证插件的默认参数配置如下：
// The first invalid field will be focused automatically
autoFocus: true ,
// Support declarative usage (setting options via HTML 5 attributes)
// Setting to false can improve the performance
declarative: true ,
// The form CSS class
elementClass: 'fv-form' ,
// Use custom event name to avoid window.onerror being invoked by jQuery
// See #630
events: {
// Support backward
formInit: 'init.form.fv' ,
formError: 'err.form.fv' ,
formSuccess: 'success.form.fv' ,
fieldAdded: 'added.field.fv' ,
fieldRemoved: 'removed.field.fv' ,
fieldInit: 'init.field.fv' ,
fieldError: 'err.field.fv' ,
fieldSuccess: 'success.field.fv' ,
fieldStatus: 'status.field.fv' ,
localeChanged: 'changed.locale.fv' ,
validatorError: 'err.validator.fv' ,
validatorSuccess: 'success.validator.fv'
},
// Indicate fields which won't be validated
// By default, the plugin will not validate the following kind of fields:
// - disabled
// - hidden
// - invisible
//
// The setting consists of jQuery filters. Accept 3 formats:
// - A string. Use a comma to separate filter
// - An array. Each element is a filter
// - An array. Each element can be a callback function
// function($field, validator) {
// $field is jQuery object representing the field element
// validator is the BootstrapValidator instance
// return true or false;
// }
//
// The 3 following settings are equivalent:
//
// 1) ':disabled, :hidden, :not(:visible)'
// 2) [':disabled', ':hidden', ':not(:visible)']
// 3) [':disabled', ':hidden', function($field) {
//return !$field.is(':visible');
// }]
excluded: [':disabled ', ' :hidden ', ' :not(:visible) '],
// Map the field name with validator rules
fields: null,
// Live validating option
// Can be one of 3 values:
// - enabled: The plugin validates fields as soon as they are changed
// - disabled: Disable the live validating. The error messages are only shown after the form is submitted
// - submitted: The live validating is enabled after the form is submitted
live: ' enabled ',
// Locale in the format of languagecode_COUNTRYCODE
locale: ' en_US ',
// Default invalid message
message: ' This value is not valid ',
// The field will not be live validated if its length is less than this number of characters
threshold: null,
// Whether to be verbose when validating a field or not.
// Possible values:
// - true: when a field has multiple validators, all of them will be checked, and respectively - if errors occur in
// multiple validators, all of them will be displayed to the user
// - false: when a field has multiple validators, validation for this field will be terminated upon the first encountered error.
// Thus, only the very first error message related to this field will be displayed to the user
verbose: true,
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// These options mostly are overridden by specific framework
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
button: {
// The submit buttons selector
// These buttons will be disabled to prevent the valid form from multiple submissions
selector: ' [type= "submit" ] ',
// The disabled class
disabled: ' '
},
control: {
// The CSS class for valid control
valid: ' ',
// The CSS class for invalid control
invalid: ' '
},
err: {
// The CSS class of each message element
clazz: ' ',
// The error messages container. It can be:
// - ' tooltip ' if you want to use Bootstrap tooltip to show error messages
// - ' popover ' if you want to use Bootstrap popover to show error messages
// - a CSS selector indicating the container
// In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
// You also can define the message container for particular field
container: null,
// Used to determine where the messages are placed
parent: null
},
// Shows ok/error/loading icons based on the field validity.
icon: {
valid: null,
invalid: null,
validating: null,
feedback: ' '
},
row: {
// The CSS selector for indicating the element consists of the field
// You should adjust this option if your form group consists of many fields which not all of them need to be validated
selector: null,
valid: ' ',
invalid: ' ',
feedback: ' '
}
|
更多信息请参考formvalidation表单验证插件官方网站：http://formvalidation.io/
