基于Bootstrap的强大jQuery表单验证插件

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+以上的版本。

HTML结构

该表单验证插件的最基本例子的HTML结果如下：

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/