数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 前端脚本 > jQuery

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

2014-12-27 15:53 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:jQuery 上一篇:jQuery浏览器版本判断 下一篇:Jquery 获取 radio选中值 CheckBox、 RadioButton、 DropDownList的取值赋值

最好的jquery表单验证插件BootstrapValidator

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

特点

代码从新构建,清晰明了

内置验证器和计数!

容易编写新确认器

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

支持Ajax验证器和表单提交

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

使用方法

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

  1. <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> 
  2. <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/> 
  3.   
  4. <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script> 
  5. <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> 
  6.   
  7. <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script> 
  8.   
  9. //如果你想使用默认的语言包,请引入下面的文件 
  10. <script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script> 

构建html代码

  1. <form> 
  2.     <div class="form-group"> 
  3.         <label>Username</label> 
  4.         <input type="text" class="form-control" name="username" /> 
  5.     </div> 
  6.     <div class="form-group"> 
  7.         <label>Email address</label> 
  8.         <input type="text" class="form-control" name="email" /> 
  9.     </div> 
  10. </form> 

写入JS初始化插件

  1. $(document).ready(function() { 
  2.     $('.registerForm').bootstrapValidator({ 
  3.         message: 'This value is not valid'
  4.         feedbackIcons: { 
  5.             valid: 'glyphicon glyphicon-ok'
  6.             invalid: 'glyphicon glyphicon-remove'
  7.             validating: 'glyphicon glyphicon-refresh' 
  8.         }, 
  9.         fields: { 
  10.             username: { 
  11.                 message: 'The username is not valid'
  12.                 validators: { 
  13.                     notEmpty: { 
  14.                         message: 'The username is required and cannot be empty' 
  15.                     }, 
  16.                     stringLength: { 
  17.                         min: 6, 
  18.                         max: 30, 
  19.                         message: 'The username must be more than 6 and less than 30 characters long' 
  20.                     }, 
  21.                     regexp: { 
  22.                         regexp: /^[a-zA-Z0-9_]+$/, 
  23.                         message: 'The username can only consist of alphabetical, number and underscore' 
  24.                     } 
  25.                 } 
  26.             }, 
  27.             email: { 
  28.                 validators: { 
  29.                     notEmpty: { 
  30.                         message: 'The email is required and cannot be empty' 
  31.                     }, 
  32.                     emailAddress: { 
  33.                         message: 'The input is not a valid email address' 
  34.                     } 
  35.                 } 
  36.             } 
  37.         } 
  38.     }); 
  39. }); 
小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。