表单/表格

基于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一起配合使用。产科下面的效果图。

Bootstrap一起使用:

Foundation一起使用:

Pure一起使用:

UI Kit一起使用:


formvalidation和Semantic UI一起使用:

使用方法

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

  1. <script src="jquery/1.10.2/jquery.min.js"></script>
  2. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  3. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  4. <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
  5. <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

HTML结构

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

  1. <form id="defaultForm" method="post" class="form-horizontal">
  2.   <div class="form-group">
  3.     <label class="col-lg-3 control-label">Username</label>
  4.     <div class="col-lg-5">
  5.       <input type="text" class="form-control" name="username" />
  6.     </div>
  7.   </div>
  8.   <div class="form-group">
  9.     <label class="col-lg-3 control-label">Email address</label>
  10.     <div class="col-lg-5">
  11.       <input type="text" class="form-control" name="email" />
  12.     </div>
  13.   </div>
  14.   <div class="form-group">
  15.     <label class="col-lg-3 control-label">Password</label>
  16.     <div class="col-lg-5">
  17.       <input type="password" class="form-control" name="password" />
  18.     </div>
  19.   </div>
  20.   <div class="form-group">
  21.     <label class="col-lg-3 control-label">Retype password</label>
  22.     <div class="col-lg-5">
  23.       <input type="password" class="form-control" name="confirmPassword" />
  24.     </div>
  25.   </div>
  26.   <div class="form-group">
  27.     <label class="col-lg-3 control-label" id="captchaOperation"></label>
  28.     <div class="col-lg-2">
  29.       <input type="text" class="form-control" name="captcha" />
  30.     </div>
  31.   </div>
  32.   <div class="form-group">
  33.     <div class="col-lg-9 col-lg-offset-3">
  34.       <button type="submit" class="btn btn-primary">Sign up</button>
  35.     </div>
  36.   </div>
  37. </form>

JAVASCRIPT

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

  1. <script type="text/javascript">
  2.   $(document).ready(function() {
  3.   // Generate a simple captcha
  4.   function randomNumber(min, max) {
  5.   return Math.floor(Math.random() * (max - min + 1) + min);
  6.   };
  7.   $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
  8.  
  9.   $('#defaultForm').bootstrapValidator({
  10.     message: 'This value is not valid',
  11.       fields: {
  12.       username: {
  13.       message: 'The username is not valid',
  14.       validators: {
  15.       notEmpty: {
  16.       message: 'The username is required and can\'t be empty'
  17.       },
  18.       stringLength: {
  19.       min: 6,
  20.       max: 30,
  21.       message: 'The username must be more than 6 and less than 30 characters long'
  22.       },
  23.       regexp: {
  24.         regexp: /^[a-zA-Z0-9_\.]+$/,
  25.         message: 'The username can only consist of alphabetical, number, dot and underscore'
  26.         },
  27.         different: {
  28.         field: 'password',
  29.         message: 'The username and password can\'t be the same as each other'
  30.         }
  31.       }
  32.     },
  33.     email: {
  34.       validators: {
  35.         notEmpty: {
  36.           message: 'The email address is required and can\'t be empty'
  37.         },
  38.         emailAddress: {
  39.           message: 'The input is not a valid email address'
  40.         }
  41.       }
  42.     },
  43.     password: {
  44.     validators: {
  45.       notEmpty: {
  46.           message: 'The password is required and can\'t be empty'
  47.         },
  48.         identical: {
  49.           field: 'confirmPassword',
  50.           message: 'The password and its confirm are not the same'
  51.         },
  52.         different: {
  53.           field: 'username',
  54.           message: 'The password can\'t be the same as username'
  55.         }
  56.       }
  57.     },
  58.     confirmPassword: {
  59.       validators: {
  60.         notEmpty: {
  61.         message: 'The confirm password is required and can\'t be empty'
  62.         },
  63.         identical: {
  64.         field: 'password',
  65.         message: 'The password and its confirm are not the same'
  66.         },
  67.         different: {
  68.         field: 'username',
  69.         message: 'The password can\'t be the same as username'
  70.         }
  71.       }
  72.     },
  73.     captcha: {
  74.       validators: {
  75.         callback: {
  76.           message: 'Wrong answer',
  77.           callback: function(value, validator) {
  78.           var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
  79.           return value == sum;
  80.           }
  81.         }
  82.       }
  83.     }
  84.   }
  85.   });
  86. });
  87. </script>

配置参数

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

  1. // The first invalid field will be focused automatically
  2. autoFocus: true,
  3.  
  4. // Support declarative usage (setting options via HTML 5 attributes)
  5. // Setting to false can improve the performance
  6. declarative: true,
  7.  
  8. // The form CSS class
  9. elementClass: 'fv-form',
  10.  
  11. // Use custom event name to avoid window.onerror being invoked by jQuery
  12. // See #630
  13. events: {
  14.   // Support backward
  15.   formInit: 'init.form.fv',
  16.   formError: 'err.form.fv',
  17.   formSuccess: 'success.form.fv',
  18.   fieldAdded: 'added.field.fv',
  19.   fieldRemoved: 'removed.field.fv',
  20.   fieldInit: 'init.field.fv',
  21.   fieldError: 'err.field.fv',
  22.   fieldSuccess: 'success.field.fv',
  23.   fieldStatus: 'status.field.fv',
  24.   localeChanged: 'changed.locale.fv',
  25.   validatorError: 'err.validator.fv',
  26.   validatorSuccess: 'success.validator.fv'
  27. },
  28.  
  29. // Indicate fields which won't be validated
  30. // By default, the plugin will not validate the following kind of fields:
  31. // - disabled
  32. // - hidden
  33. // - invisible
  34. //
  35. // The setting consists of jQuery filters. Accept 3 formats:
  36. // - A string. Use a comma to separate filter
  37. // - An array. Each element is a filter
  38. // - An array. Each element can be a callback function
  39. //    function($field, validator) {
  40. //  $field is jQuery object representing the field element
  41. //  validator is the BootstrapValidator instance
  42. //  return true or false;
  43. //    }
  44. //
  45. // The 3 following settings are equivalent:
  46. //
  47. // 1) ':disabled, :hidden, :not(:visible)'
  48. // 2) [':disabled', ':hidden', ':not(:visible)']
  49. // 3) [':disabled', ':hidden', function($field) {
  50. //return !$field.is(':visible');
  51. //  }]
  52. excluded: [':disabled', ':hidden', ':not(:visible)'],
  53.  
  54. // Map the field name with validator rules
  55. fields: null,
  56.  
  57. // Live validating option
  58. // Can be one of 3 values:
  59. // - enabled: The plugin validates fields as soon as they are changed
  60. // - disabled: Disable the live validating. The error messages are only shown after the form is submitted
  61. // - submitted: The live validating is enabled after the form is submitted
  62. live: 'enabled',
  63.  
  64. // Locale in the format of languagecode_COUNTRYCODE
  65. locale: 'en_US',
  66.  
  67. // Default invalid message
  68. message: 'This value is not valid',
  69.  
  70. // The field will not be live validated if its length is less than this number of characters
  71. threshold: null,
  72.  
  73. // Whether to be verbose when validating a field or not.
  74. // Possible values:
  75. // - true:  when a field has multiple validators, all of them will be checked, and respectively - if errors occur in
  76. //  multiple validators, all of them will be displayed to the user
  77. // - false: when a field has multiple validators, validation for this field will be terminated upon the first encountered error.
  78. //  Thus, only the very first error message related to this field will be displayed to the user
  79. verbose: true,
  80.  
  81. // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  82. // These options mostly are overridden by specific framework
  83. // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  84.  
  85. button: {
  86.   // The submit buttons selector
  87.   // These buttons will be disabled to prevent the valid form from multiple submissions
  88.   selector: '[type="submit"]',
  89.  
  90.   // The disabled class
  91.   disabled: ''
  92. },
  93.  
  94. control: {
  95.   // The CSS class for valid control
  96.   valid: '',
  97.  
  98.   // The CSS class for invalid control
  99.   invalid: ''
  100. },
  101.  
  102. err: {
  103.   // The CSS class of each message element
  104.   clazz: '',
  105.  
  106.   // The error messages container. It can be:
  107.   // - 'tooltip' if you want to use Bootstrap tooltip to show error messages
  108.   // - 'popover' if you want to use Bootstrap popover to show error messages
  109.   // - a CSS selector indicating the container
  110.   // In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
  111.   // You also can define the message container for particular field
  112.   container: null,
  113.  
  114.   // Used to determine where the messages are placed
  115.   parent: null
  116. },
  117.  
  118. // Shows ok/error/loading icons based on the field validity.
  119. icon: {
  120.   valid: null,
  121.   invalid: null,
  122.   validating: null,
  123.   feedback: ''
  124. },
  125.  
  126. row: {
  127.   // The CSS selector for indicating the element consists of the field
  128.   // You should adjust this option if your form group consists of many fields which not all of them need to be validated
  129.   selector: null,
  130.   valid: '',
  131.   invalid: '',
  132.   feedback: ''
  133. }

官方网站:http://formvalidation.io/

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!