2012年最有用的50款 jQuery 插件集锦——《表单篇》

        这篇文章继续向大家分享一批实用的 jQuery 插件，今天带来的是网站项目中最常用的表单插件。这是一个系列的文章，将向大家分享50款最具创新的，同时也是最有用的 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件以及视频插件等等，欢迎大家关注。

您可能感兴趣的相关文章

• 50款最有用的 jQuery 插件集锦-网站导航篇
• 精心挑选的美轮美奂的 jQuery 图片特效插件
• 12款经典的白富美型 jQuery 图片轮播插件
• 精心挑选的优秀jQuery Ajax分页插件和教程
• 2013年最值得大家关注的网页设计流行趋势

 

jQuery Complexify

网站有责任告诉用户他们设置的密码的质量，这款插件可以显示密码的复杂程度，通过视觉反馈把风险降到最低。

使用非常简单，示例 HTML 代码：

?

1 2 3 4 5 6 7 8 9

< script src = '../assets/s/jquery.complexify.js' ></ script > < div id = "demo" >      < input type = "password" id = "password" placeholder = "Password" >      < div id = "progressbar" >< div id = "progress" ></ div ></ div >      < div id = "status" >          < div id = "complexity" >0%</ div >          < div id = "complexityLabel" >Complexity</ div >      </ div > </ div >

　　示例 CSS 代码：

View Code

　　示例 JavaScript 代码： 

?

1 2 3 4 5 6 7 8 9 10

$( function () {      $( "#password" ).complexify({}, function (valid, complexity) {          if (!valid) {              $( '#progress' ).css({ 'width' :complexity + '%' }).removeClass( 'progressbarValid' ).addClass( 'progressbarInvalid' );          } else {              $( '#progress' ).css({ 'width' :complexity + '%' }).removeClass( 'progressbarInvalid' ).addClass( 'progressbarValid' );          }          $( '#complexity' ).html(Math.round(complexity) + '%' );      }); });

　　 插件下载     效果演示

 

jQuery File Upload

jQuery File Upload 是最流行的文件上传插件之一，主要特色：

• ✓  支持多个文件同时上传
• ✓  支持拖放上次
• ✓  显示上次进度
• ✓  上传可以取消和恢复
• ✓  可以在客户端缩放图像
• ✓  支持图像预览
• ✓  定制和扩展性强
• ✓  不需要浏览器插件（例如 Flash）
• ✓  支持跨站点上传
• ✓  同页面支持多个上传实例

使用方式多种多样，简单示例代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$( '#fileupload' ).fileupload( 'option' , {              url: '//jquery-file-upload.appspot.com/' ,              maxFileSize: 5000000,              acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,              process: [                  {                      action: 'load' ,                      fileTypes: /^image\/(gif|jpeg|png)$/,                      maxFileSize: 20000000 // 20MB                  },                  {                      action: 'resize' ,                      maxWidth: 1440,                      maxHeight: 900                  },                  {                      action: 'save'                  }              ]          });

　　 插件下载     效果演示

 

Filtrify

Filtrify 是一款先进的的标签过滤插件，灵感来自 Chosen 的多选功能和欧曼克拉的垂直导航菜单功能。

你可以在标签和由多个不同类别的标签组成的过滤项目中搜索标签，获得包含相关标签项目的数量的实时反馈。

效果演示：

• Single category
• Multiple categories
• Isotope integration
• Highlight matched items with the callback function
• Add a legend with the callback function
• Instantiate with a custom query
• Trigger a custom query
• Reset all filters
• Close panel after adding a tag
• Block "data" attributes from being added as categories
• Load images with Lazy Load
• Add pagination with jPages

示例代码：

?

< div id = "placeHolder" ></ div > < ul id = "container" >      < li data-genre = "pop, rock, british, classic rock" > The Beatles </ li >      < li data-genre = "rock, british, blues, classic rock" > The Rolling Stones </ li >      < li data-genre = "alternative, electronic, female vocalists" > Björk </ li >      < li data-genre = "rock, alternative, grunge" > Foo Fighters </ li >      < li data-genre = "rock, classic rock" > Bruce Springsteen </ li >      ... </ ul > < script >      $(function() {          $.filtrify("container", "placeHolder");      }); </ script >

　　 插件下载     官方主页

 

mailcheck

Mailcheck 是一款非常棒的 jQuery 插件，当用户拼写错误的电子邮件地址时，会智能提示正确的邮箱域名。

示例 HTML 代码：

?

1 2 3

< script src = "jquery.min.js" ></ script > < script src = "mailcheck.min.js" ></ script > < input id = "email" name = "email" type = "text" />

示例 JavaScript 代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var domains = [ 'hotmail.com' , 'gmail.com' , 'aol.com' ]; var topLevelDomains = [ "com" , "net" , "org" ];   var superStringDistance = function (string1, string2) {    // a string distance algorithm of your choosing }   $( '#email' ).on( 'blur' , function () {    $( this ).mailcheck({      domains: domains,                       // optional      topLevelDomains: topLevelDomains,       // optional      distanceFunction: superStringDistance,  // optional      suggested: function (element, suggestion) {        // callback code      },      empty: function (element) {        // callback code      }    }); });

　　 插件下载     官方主页

 

jQuery Credit Card Validator

jQuery Credit Card Validator 用于检测和校验信用卡号码，它会告诉你检测到的信用卡类型以及号码是否有效。

这款插件适合用于国外项目，不知道大家是否有类似的适合用于国内的插件推荐，欢迎留言：）

　　 插件下载     效果演示

 

如