JQUERY源码 作者： - 2016年8月18日
1个投票
1条评论

表单验证-基于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一起使用：

bootstrap

formvalidation和Foundation一起使用：

foundation

formvalidation和Pure一起使用：

pure

formvalidation和UI Kit一起使用：

uikit

formvalidation和Semantic UI一起使用：

semantic

使用方法

使用这个表单验证插件首先要引入必要的js和css文件。jQuery要求1.9.1+以上的版本。

<script src="jquery/1.10.2/jquery.min.js"></script>
<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>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
<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</label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="username" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Email address</label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Password</label>
    <div class="col-lg-5">
      <input type="password" class="form-control" name="password" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Retype password</label>
    <div class="col-lg-5">
      <input type="password" class="form-control" name="confirmPassword" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label" id="captchaOperation"></label>
    <div class="col-lg-2">
      <input type="text" class="form-control" name="captcha" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-9 col-lg-offset-3">
      <button type="submit" class="btn btn-primary">Sign up</button>
    </div>
  </div>
</form>               
JAVASCRIPT

在页面加载完毕之后，通过下面的方法来初始化该表单验证插件：

<script type="text/javascript">
  $(document).ready(function() {
  // Generate a simple captcha
  function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
  };
  $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
  $('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
      fields: {
      username: {
      message: 'The username is not valid',
      validators: {
      notEmpty: {
      message: 'The username is required and can\'t 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, dot and underscore'
        },
        different: {
        field: 'password',
        message: 'The username and password can\'t be the same as each other'
        }
      }
    },
    email: {
      validators: {
        notEmpty: {
          message: 'The email address is required and can\'t be empty'
        },
        emailAddress: {
          message: 'The input is not a valid email address'
        }
      }
    },
    password: {
    validators: {
      notEmpty: {
          message: 'The password is required and can\'t be empty'
        },
        identical: {
          field: 'confirmPassword',
          message: 'The password and its confirm are not the same'
        },
        different: {
          field: 'username',
          message: 'The password can\'t be the same as username'
        }
      }
    },
    confirmPassword: {
      validators: {
        notEmpty: {
        message: 'The confirm password is required and can\'t be empty'
        },
        identical: {
        field: 'password',
        message: 'The password and its confirm are not the same'
        },
        different: {
        field: 'username',
        message: 'The password can\'t be the same as username'
        }
      }
    },
    captcha: {
      validators: {
        callback: {
          message: 'Wrong answer',
          callback: function(value, validator) {
          var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
          return value == sum;
          }
        }
      }
    }
  }
  });
});
</script>

配置参数

该表单验证插件的默认参数配置如下：

// 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/

在线预览 网盘下载

郑重声明：

				
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

				
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

				
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

				
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
作者： 蓝文
查看更多
标签:, , ,
关注公众号“蓝文资源库”获取更多好资源
表单验证-基于BootStrap的强大jQuery表单验证插件 5 out of 5 based on 1 ratings. 1 user reviews.

相关文章

HTML5模板 2020年5月12日

OneUI响应式BOOTSTRAP4后台管理仪表盘+LARAVEL套件HTML5模板下载

主要特征 基于我们多年来在仪表…

阅读更多
PHP案例 2020年2月26日

Pixie Image Editor在线图片编辑器-无水印破解版JS源码下载

Pixie是完全可定制的，高性…

阅读更多
PHP源码 2019年9月7日

基于Laravel电子商务系统Laravel EcommercePHP源码下载

Laravel电子商务CMS是…

阅读更多

1条评论

发表评论

  1. 蓝文

    |作者
    2016年8月18日 下午3:34 -

    基于BootStrap的强大jQuery表单验证插件, 也许这是最棒的表单验证插件，推荐下载使用

发表评论