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

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

jQuery Complexify

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

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

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

<div id="complexityLabel">Complexity</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;
}

#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;

}

.progressbarInvalid {

background-color:red;

}

#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) + '%');
    });
});

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

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

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

效果演示：

示例代码：

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

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

$(function() {

$.filtrify("container", "placeHolder");

});

</script>

插件下载官方主页

mailcheck

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

示例 HTML 代码：

&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="mailcheck.min.js"&gt;&lt;/script&gt;
&lt;input id="email" name="email" type="text" /&gt;

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

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 用于检测和校验信用卡号码，它会告诉你检测到的信用卡类型以及号码是否有效。

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

插件下载效果演示

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

jQuery Complexify

jQuery File Upload

Filtrify

mailcheck

jQuery Credit Card Validator

关于稚子