幾款很棒的 JavaScript 表單美化和驗證插件

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

您可以使用所提供的默認主題,或以最小的努力開發你自己需要的外觀樣式。

插件下載      在線演示

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章