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”

511 total views, 1 views today