几款很棒的 JavaScript 表单美化和验证插件

表单元素让人爱恨交加。作为网页最重要的组成部分，表单几乎无处不在，从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能，表单都让开发者花费了大量的时间和精力去处理，以期实现好用又漂亮的表单功能。这篇文章向大家推荐几款很棒的 JavaScript 表单美化和验证插件。

您可能感兴趣的相关文章

• 精心挑选12款优秀 jQuery Ajax 分页插件
• 经验分享：10个简单实用的 jQuery 代码片段
• 分享8款效果精美的 jQuery 加载进度条插件
• 期待已久的2012年度最佳 jQuery 插件揭晓
• 精心挑选的优秀 JavaScript 日历和时间插件

 

Ideal Forms

Ideal Forms 则是先进的响应式 HTML5 表单插件，它支持响应式的布局，表单元素界面精美。

主要特色：

• 完全响应式；
• 完美键盘操作支持；
• 可定制的输入标签：select, radio, checkbox 以及 file；
• 自定义的日期选择器
• 本地化支持

表单验证的代码示例：

var options = {  inputs: {    'username': {      filters:'required username exclude',      data: { exclude: ['user','username','admin'] }    },    'date': { filters: 'date' },    'comments': {      filters:'min max',      data: { min: 50, max: 200 }    },    'colors': {      filters:'exclude',      data: { exclude: ['default'] },      errors: { exclude: 'Choose a color from the list.' }    },    'langs[]': {      filters:'min',      data: { min: 2 },      errors: { min: 'Check at least <strong>2</strong> languages.' }    },    'options': {      filters:'min'      data: { min: 1 },      errors: { min: 'Check only <strong>1</strong> option.' }    }  }}; var $myform = $('#my-form').idealforms( options ).data('idealforms');

支持的浏览器：IE8+, Webkit, Firefox, Opera, iOS5+, Android 4.0+。

插件下载      在线演示

jqTransform

jqTransform 这款表单插件已经出现相当长的一段时间。如果你想快速修改表单皮肤，你应该试试这个。

编写相应的代码，你就可以控制你想应用皮肤的表单元素。和上面的 Ideal Forms 相比，这个插件年代是有点久远了。

调用方法：

$(function() {    //find all form with class jqtransform and apply the plugin    $("form.jqtransform").jqTransform();});

插件下载      在线演示

Formly

令人难以置信的简单方法来添加风格和表单验证，Formly 给您的网站表单功能增添精彩。

轻松添加样式，验证，和一个单一的功能以及令人印象深刻的用户交互。可配置多个主题效果。

使用示例：

$(document).ready(function() {      $('#ContactInfo').formly({'theme':'Dark'},function(e) {                  $('.callback').html(e);     });});

插件下载      在线演示

 

jQuery.validationEngine

这款插件的校验提示效果很漂亮，基于 CSS3 实现，可以参考一下。

插件下载      在线演示

Niceform

Niceforms 是一个使用自定义设计的风格取代最常用的表单元素的脚本。

您可以使用所提供的默认主题，或以最小的努力开发你自己需要的外观样式。

插件下载      在线演示