表單元素讓人愛恨交加。作爲網頁最重要的組成部分,表單幾乎無處不在,從簡單的郵件訂閱、登陸註冊到複雜的需要多頁填寫的信息提交功能,表單都讓開發者花費了大量的時間和精力去處理,以期實現好用又漂亮的表單功能。這篇文章向大家推薦幾款很棒的 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 是一個使用自定義設計的風格取代最常用的表單元素的腳本。
您可以使用所提供的默認主題,或以最小的努力開發你自己需要的外觀樣式。