2013年jQuery Validation Engine 表單驗證

目錄(?)[-] options 參數說明可選 使用方法 載入 CSS 檔案 載入 JavaScript 檔案 給表單加上 ID 給控制項加上 ID 及 設定驗證類型 設定驗證 驗證類型 API 方法 validationEngine中文版  jquery強大的表單驗證外掛程式 一簡單說明下使用教程 引入jquery和外掛程式jscss 初始化外掛程式 你還可以在點擊提交按鈕後才觸發驗證 預設的是在滑鼠失去焦點後才開始驗證也就是綁定的是blur事件那如何改變呢看下面的配置 修改提示層的位置 ajax驗證模式

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

http://blog.csdn.net/andyliulin/

注意事項：

1.示範版本為 v2.2.4；

2.v2.0 以下的版本參數並不完全通用；

對 validationEngine.jquery.css 檔案進行修改，修改如下：

1.提示內容字型改為宋體；

2.去除中各瀏覽器的私人屬性（各瀏覽器已經支援圓角和陰影，不再需要加私人屬性）。

對 jquery.validationEngine.js 檔案進行修改，修改如下：

1.將 312 行的 field.focus(); 注釋掉，當有輸入控制項在 Table 內部時，驗證會導致回到頂部的現象；

對 jquery.validationEngine-zh_CN.js 檔案進行修改，修改如下：

1.修改部分提示文字；

2.增加兩個對中文字元的驗證規則：minSizeCN 和 maxSizeCN；

3.去除 "validate2fields": {"alertText":"* 請輸入 HELLO"},

將以上兩個JS檔案進行合并

查看 Demo

修改版：jQuery Validation Engine v2.2.4 中文版

原　版：jQuery Validation Engine v2.2.4 【options 參數說明】（可選）

名稱	預設值	說明
validationEventTrigger	"blur"	觸發驗證的事件，支援事件可參考 jQuery 的事件說明。 PS：如果希望只在表單提交時驗證，可以設定為空白。
scroll	true	螢幕自動滾動到第一個驗證不通過的位置
focusFirstField	true	驗證未通過時，是否給第一個不通過的控制項擷取焦點
promptPosition	"topRight"	驗證提示資訊的位置，可設定為："topRight", "bottomLeft", "centerRight", "bottomRight"
autoPositionUpdate	false	是否自動調整提示層的位置
bindMethod	"bind"	驗證事件的綁定方式，可設定為：bind, live PS：設定 live 似乎綁定事件無效，但是表單提交時能驗證，建議不修改。[Demo]
binded	false	是否已經綁定其他事件，設為 true 將不進行驗證。
inlineAjax	false
ajaxFormValidation	false	使用 Ajax 驗證表單
ajaxFormValidationURL	false	設定 Ajax 驗證的 URL，預設使用 form 的 action 屬性
ajaxValidCache	{}
onAjaxFormComplete	$.noop	表單提交，Ajax 驗證完成後的行為（Function）[Demo]
onBeforeAjaxFormValidation	$.noop	表單提交驗證規則通過後，Ajax 驗證之前的行為（Function）[Demo]
onValidationComplete	false	表單提交驗證完成時的行為（Function） 可以得到兩個參數：表單元素 和 驗證結果（ture or false）[Demo]
onSuccess	false	即時驗證所有項目都通過時，發生的行為（Function）[Demo]
onFailure	false	即時驗證有未通過項目時，發生的行為（Function）[Demo] PS：onSuccess 和 onFailure 在禁用即時驗證時無效。例如 validationEventTrigger 設為空白，或 bindMethod 設為 live
isOverflown	false	表單是否在溢出滾動的元素內（即外部元素設定了 overflow:scroll） PS：設定為 ture 後，提示內容的插入位置將更改為在驗證的控制項之前插入； 　　此時需要在控制項外層再套一個元素，並設定 class="inputContainer"
overflownDIV	""	設定了溢出滾動的元素，格式為 jQuery 的選取器。
showArrow	true
isError	false
InvalidFields	[]

【使用方法】 載入 CSS 檔案

<link rel="stylesheet" href="css/validationEngine.jquery.css">

載入 JavaScript 檔案

<script src="js/jquery.validationEngine.js"></script> <script src="js/jquery.validationEngine-zh_CN.js"></script> <!-- jquery.validationEngine-zh_CN.js 該檔案為提示文字和自訂驗證規則； 修改版已經將這兩個檔案合并，只需要載入 jquery.validationEngine.js； 另外，jQuery 外掛程式當然還需要載入 jQuery 庫，版本需在 jQuery 1.4.4 以上。 -->

給表單加上 ID

<form id="form_id" ...> ... </form> <!-- ID 必須設定在 Form 標籤中，否則無效 -->

給控制項加上 ID 及 設定驗證類型

<input id="test_1" name="test_1" type="text" class="validate[required]"> <input id="test_2" name="test_2" type="checkbox" class="validate[required]"> <textarea id="test_3" name="test_3" class="validate[required]"><textarea> <!-- validate[required] 表示必須填寫 控制項必須要設定 ID，但並不要求與 Name 相同 --> 

設定驗證

// 直接調用 $("#form_id").validationEngine();  // 自訂參數調用 $("#form_id").validationEngine("attach",{     promptPosition:"centerRight",     scroll:false }); 

【驗證類型】

<!-- 註：驗證規則均寫在 validate[] 中，如有多條規則，用英文逗號(,) 分割。 例：validate[required,minSize[6],custom[onlyLetterNumber]] --> 

名稱	樣本	說明
required	validate[required]	表示必填項
optional	validate[optional]	表示可選項。若不輸入，不要求必填，若有輸入，則驗證其是否符合要求。
dateRange[name]	validate[dateRange[grp1]]	驗證日期範圍
dateTimeRange[name]	validate[dateTimeRange[grp1]]	驗證日期及時間範圍
minSize[int]	validate[minSize[6]]	最少輸入字元數
maxSize[int]	validate[maxSize[20]]	最多輸入字元數
groupRequired[name]	validate[groupRequired[grp2]]	群組中至少輸入一項
min[int]	validate[min[1]]	最小值（該項為數位最小值，注意與 minSize 的區分）
max[int]	validate[max[9999]]	最大值（該項為數位最大值，注意與 maxSize 的區分）
past[date]	validate[past[2012/12/20]]	日期必需在 date 或 date 的未來。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[date]	validate[future[now]]	日期必須在 data 或 date 的過去。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
maxCheckbox[int]	validate[maxCheckbox[2]]	最多選取的項目數（用於Checkbox）
minCheckbox	validate[minCheckbox[2]]	最少選取的項目數（用於Checkbox）
equals	validate[equals[id]]	當前控制項值需與 id 這個控制項的值相同
phone	validate[custom[phone]]	驗證電話號碼
email	validate[custom[email]]	驗證 Email 地址
integer	validate[custom[integer]]	驗證整數
number	validate[custom[number]]	驗證數字
date	validate[custom[date]]	驗證日期，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat	validate[custom[dateFormat]]	驗證日期格式，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat	validate[custom[dateTimeFormat]]	驗證日期及時間格式，格式為：YYYY/MM/DD hh:mm:ss AM|PM
ipv4	validate[custom[ipv4]]	驗證 ipv4 地址
url	validate[custom[url]]	驗證 url 地址，需以 http://、https:// 或 ftp:// 開頭
onlyNumberSp	validate[custom[onlyNumberSp]]	只接受填數字和空格
onlyLetterSp	validate[custom[onlyLetterSp]]	只接受填英文字母（大小寫）和單引號(')
onlyLetterNumber	validate[custom[onlyLetterNumber]]	只接受數字和英文字母
ajax	validate[ajax[ajaxUserCallPhp]]	在驗證規則中自訂 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帳號名稱可以使用", "alertText":"* 此名稱已被其他人使用", "alertTextLoad":"* 正在確認帳號名稱是否有其他人使用，請稍等。" }
funcCall	validate[funcCall[functionName]]	調用外部函數

【API 方法】

名稱	樣本	說明
attach	$("#form_id").validationEngine("attach");	註冊表單驗證事件
detach	$("#form_id").validationEngine("detach");	取消註冊表單驗證事件
validate	alert($("#form_id").validationEngine("validate"));	驗證表單，返回結果 true 或 false
validateField	alert($("#form_id").validationEngine("validateField","#element_id"));	驗證單個控制項，返回結果 true 或 false
showPrompt	$("#element_id").validationEngine("showPrompt","提示內容","load");	在該元素上建立一個提示內容，3 種狀態："pass", "error", "load"
hidePrompt	$("#element_id").validationEngine("hidePrompt");	隱藏該元素的提示內容
hide	$("#form_id").validationEngine("hide");	關閉表單中的提示
hideAll	$("#form_id").validationEngine("hideAll");	關閉頁面上得所有提示
updatePromptsPosition	$("#form_id").validationEngine("updatePromptsPosition")	更新提示層的位置

validationEngine中文版 — jquery強大的表單驗證外掛程式 中文漢化版，官方只有英文的。同時根據中國國情修改了部分驗證規則。

這個外掛程式支援大部分的瀏覽器，但由於有使用到了css3的陰影和圓角樣式，所以在IE瀏覽器下無法看到圓角和陰影製作效果（萬惡的IE）。

官方下載地址：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

普通驗證的例子：http://www.position-relative.net/creation/formValidator/

ajax驗證的例子：http://www.position-relative.net/creation/formValidator/demoSubmit.html

一：簡單說明下使用教程： 引入jquery和外掛程式js、css <linkrel="stylesheet"href="css/validationEngine.jquery.css"type="text/css"media="screen"charset="utf-8"/> <script src="js/jquery.js"type="text/javascript"></script> <script src="js/jquery.validationEngine-en.js"type="text/javascript"></script> <script src="js/jquery.validationEngine.js"type="text/javascript"></script>

jquery.validationEngine-en.js是語言檔案，所有的提示都在這個檔案找的到，可以很方便的轉成其他語言，同時你也可以在這個檔案內定製屬於自己的驗證規則。 初始化外掛程式 $(document).ready(function(){ $("#formID").validationEngine() })

驗證規則是寫在表單元素的class屬性內。比如下面： <inputvalue=""class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]"type="text"name="user"id="user"/>

驗證規則非常多樣，基本上包含了所有的資料類型的驗證。
所有的驗證規則寫在validate[]內，有多種驗證，用逗號隔開，這裡簡要說明下常用的驗證規則。 required：值不可以為空白 length[0,100] ：文字允許長度 confirm[fieldID] ：匹配其他的表單元素的值，fieldID就是其他表單元素的id，這個主要用於再次確認密碼 telephone ：資料格式要求符合電話格式 email ： 資料格式要求符合email 格式 onlyNumber ：只允許輸入數字 noSpecialCaracters ：不允許出現特殊字元 onlyLetter ： 只能是字母 date ：必須符合日期格式YYYY-MM-DD 你還可以在點擊提交按鈕後才觸發驗證。 $("#formID").validationEngine({ inlineValidation: false, success :  false, failure : function() {callFailFunction() } }) 預設的是在滑鼠失去焦點後才開始驗證，也就是綁定的是blur事件，那如何改變呢。看下面的配置。 $("#formID").validationEngine({ validationEventTriggers:"keyup blur", //will validate on keyup and blur   success :  false, failure : function() {callFailFunction() } })

validationEventTriggers屬性就是修改綁定事件，上面是增加了個keyup，也就是鍵盤按鍵起來就觸發驗證。 修改提示層的位置 $("#formID").validationEngine