表單元素讓人愛恨交加。作為網頁最重要的組成部分，表單幾乎無處不在，從簡單的郵件訂閱、登陸注冊到復雜的需要多頁填寫的信息提交功能，表單都讓開發者花費了大量的時間和精力去處理，以期實現好用又漂亮的表單功能。這篇文章向大家推薦幾款很棒的 JavaScript 表單美化和驗證插件。
您可能感興趣的相關文章
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 這款表單插件已經出現相當長的一段時間。如果你想快速修改表單皮膚，你應該試試這個。
編寫相應的代碼，你就可以控制你想應用皮膚的表單元素。和上面的 Ideal Forms 相比，這個插件年代是有點久遠了。
調用方法：
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
令人難以置信的簡單方法來添加風格和表單驗證，Formly 給您的網站表單功能增添精彩。
輕松添加樣式，驗證，和一個單一的功能以及令人印象深刻的用戶交互。可配置多個主題效果。
使用示例：
$(document).ready(function() {
$('#ContactInfo').formly({'theme':'Dark'}, function(e) {
$('.callback').html(e);
});
});
這款插件的校驗提示效果很漂亮，基於 CSS3 實現，可以參考一下。
Niceforms 是一個使用自定義設計的風格取代最常用的表單元素的腳本。
您可以使用所提供的默認主題，或以最小的努力開發你自己需要的外觀樣式。
您可能感興趣的相關文章