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

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

您可能感兴趣的相关文章

jQuery Complexify

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

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

<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 代码：

#demo { 
    width:380px; 
    margin-right:auto; 
    margin-left:auto; 
} 
  
#progressbar { 
    width:388px; 
    height:48px; 
    display:block; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
    border-top:1px solid #ccc; 
    border-top-right-radius: 8px; 
    border-top-left-radius: 8px; 
    overflow:hidden; 
    background-color: white; 
} 
  
#progress { 
    display:block; 
    height:100px; 
    width:0%; 
} 
  
.progressbarValid { 
    background-color:green; 
    background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%); 
  background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%); 
  background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%); 
  background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%); 
  background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%); 
} 
  
.progressbarInvalid { 
    background-color:red; 
    background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%); 
  background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%); 
  background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%); 
  background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%); 
  background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%); 
} 
  
#status { 
    height:150px; 
    width:388px; 
    border:1px solid #ccc; 
    border-bottom-right-radius: 8px; 
    border-bottom-left-radius: 8px; 
    background-color: white; 
} 
  
#password { 
    width:100%; 
    height:40px; 
    font-size:30px; 
    line-height:40px; 
    border-radius: 8px; 
    padding: 4px; 
  
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    margin-bottom: 9px; 
    color: #555555; 
    border: 1px solid #cccccc; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    -webkit-text-security: disc; 
    -webkit-appearance: textfield; 
    outline: none; 
} 
  
#complexityLabel { 
    width:100%; 
    text-align:center; 
    margin-top:10px; 
    font-size:20px; 
    line-height:30px; 
} 
  
#complexity { 
    width:100%; 
    text-align:center; 
    font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif; 
    font-weight:bold; 
    font-size:70px; 
    line-height:80px; 
    margin-top:10px; 
}

　　示例 JavaScript 代码：

$(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）
✓ 支持跨站点上传
✓ 同页面支持多个上传实例

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

$('#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 的多选功能和欧曼克拉的垂直导航菜单功能。

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

效果演示：

示例代码：

<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 代码：

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

示例 JavaScript 代码：

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 
    } 
  }); 
});