基于bootstrap3最好的jquery表单验证插件BootstrapValidator

BootstrapValidator是一款最好的jquery表单字段验证插件，它是基于boostrap3设计的，插件需要jquery与boostrap3才能正常运行，不喜欢bootstrap的朋友慎下。

特点

代码从新构建,清晰明了

内置验证器和计数!

容易编写新确认器

显示基于字段有效性反馈图标

支持Ajax验证器和表单提交

字段验证器可以启用/禁用

使用方法

引入核心库，插件是基本jquery和bootstrap的，需先引入。

1 2 3 4 5 6 7 8 9 10

< 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 >   < script  type = "text/javascript"  src = "/path/to/dist/js/bootstrapValidator.min.js" ></ script >   //如果你想使用默认的语言包，请引入下面的文件 < script  type = "text/javascript"  src = "/path/to/src/js/language/languagecode_COUNTRYCODE.js" ></ script >

构建html代码

1 2 3 4 5 6 7 8 9 10

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

写入JS初始化插件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

$(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'                      }                  }              }          }      }); });

转自：JQ酷  http://www.jqcool.net/jquery-bootstrapvalidator.html