jQuery.validationEngine v2.6.2

作者: jQuery-Validation-Engine

之前使用 jQuery Validation ,在檢索時看到了一張圖

才知道這是另外一個 jQuery Plugin ,對於預設的設計理念來說,jQuery.validationEngine 的錯誤提醒不會破壞原表單排版,比較不需要糾結表單結構設計,尤其是版面元素較多編排緊湊的情況。

程式範例一次演示多個使用場景

  1. Bootstrap 的表單套用
  2. 標準 HTML5 attribute 設定
  3. 正確驗證後使用 XMLHttpRequest() 送出資料

將綁定和驗證分開

使用 attach 和表單綁定,然後使用 validate 驗證表單輸入

 

使用 ajax 和 serialize() 送出表單資料

根據參考資料 serialize() 除了可以將表單完整打包之外,還可以進行過濾,例如

只傳輸有顯示的欄位及 type=’hidden’ 的隱藏欄位

最大字數

Limit the number of characters in a textarea

還是沿用 HTML 的 maxlength=”10″ 設定

中文教程、說明

自訂驗證格式 – 以臺灣手機格式為例

jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-zh_TW.js

原來就有手機號碼的驗證方式,不過因為只有語言中文化,所以手機號碼還是驗證外國的,套用在臺灣手機號碼就是失敗,改一下就好了

使用

根據選擇自訂驗證條件

如果評分小於 7 則必須填寫意見

表單送出

serialize() 不處理 display:none; 不過還是要送出 input type=”hidden”

768 total views, 2 views today

Bootstrap 3

Modal

只能使用關閉功能關閉視窗,設定  data-keyboard=”false”, data-backdrop=”static”

Tooltips, Popovers

針對超長且無空格英數字串,必須另外設定 CSS 處理

jQuery Ajax 完成後執行,網頁內容為 ajax 載入,Javascript 在 HTML 一開始載入無法獲取對象,部份操作可以使用 $(document).on() ,不過並不是萬能

 

  • http://jquery-plugins.net/jquery-blockui-plugin
  • http://www.malsup.com/jquery/block/#demos
  • http://www.bootstrapzero.com/bootstrap-template/blocks
  • http://designmodo.github.io/startup-demo/?u=787
  • http://respontent.frebsite.nl/

自訂組件 – 移除 glyphicons

到 Customize and download · Bootstrap 自訂需求後,到最下方點擊 Compile and Download 即可

162 total views, no views today

Bootstrap 的字型圖示原理

CSS3 網頁字型說明:CSS3 Web Fonts

 

 

最終呈現

20140302_000

更多的網頁字型下載: 10 Super Useful Free Icon Font Sets | Freebies

自己的 TureType 字型轉換

可以到 Font2Web – Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svg 這裡轉換

325 total views, no views today