jQuery Validation Engine來處理表單驗證

個人覺得jQuery Validation Engine來處理表單驗證，是jquery中很友好的一個插件，它的功能和自定義都很友好。在前幾天發現它升級了，在新的升級版本中增加了好多對用戶體驗很好的東西，為此在小熊個人博客給大家分享一下。

jquery12

maxErrorsPerField

在老版本中，如果我們設置驗證規則為：validate[required,minSize[6],maxSize[20]]，如果什么都沒有填，就會出現 3 個提示有木有！如果多個輸入框之間的間隔不是很多，會遮住下面的輸入框或者提示信息有木有！

這個參數是我覺得這次更新最有用的參數，設置為 1 時，就不會出現 3 個提示，而只會出現 1 個提示。


$("#formId")..validationEngine({
maxErrorsPerField: 1 // 參數值為數值
});

showOneMessage

該參數的功能是，在提交驗證時，只會顯示第一個輸入框的錯誤，后面的都不會顯示，和 maxErrorsPerField 結合使用，超級贊


$("#formId").validationEngine({
showOneMessage: true
});

focusFirstField

使用該參數，在提交驗證時，如果沒有通過驗證規則，那么會讓第一個輸入框自動獲取焦點，用戶體驗很好，這個 凸輪轉子泵參數默認是開啟的，所以不需要再次設置。


$("#formId").validationEngine({
focusFirstField: true
});

autoHidePrompt

autoHideDelay

自動隱藏提示信息，以及設置 凸輪轉子泵延時多久自動隱藏。


$("#formId").validationEngine({
autoHidePrompt: true
autoHideDelay: 5000 // 單位毫秒（ms）
});

autoPositionUpdate

自動調整提示信息。使用后，當窗口大小變化時，會自動調整提示信息的位置，對於不是固定布局的頁面很有用。

$("#formId").validationEngine({
autoPositionUpdate: true
});

addPromptClass

給提示信息的元素增加樣式。在沒有這個參數之前，都是直接修改 Validation Engine 自身的樣式，或者在表單上手動增加一個樣式，再通過后輩選擇器來覆蓋，有了這個參數，將能更靈活的控制樣式。

$("#formId").validationEngine({
addPromptClass: ""
});

custom_error_messages

自定義錯誤信息的內容。當同一個驗證方式，在不同的頁面要求顯示不同的提示信息時，這個參數就能大顯身手，例如：注冊的同意協議勾選框，要求必選，默認只會提示為必填，而我們需要更准確的提示“請先閱讀並同意服務協議”。具體可以參考這個例子。


$("#formId").validationEngine({
custom_error_messages: {
"#id":{ // 元素的選擇器
"ruleName":{ // 該元素的驗證規則名稱，如：required、minSize、custom[url]
"message":"" // 自定義提示的內容
}
}
}
});

addSuccessCssClassToField

addFailureCssClassToField

當驗證通過或不通過時，給元素增加的樣式。通過增加樣式來讓元素更醒目的提示，也是不錯的體驗。


$("#formId").validationEngine({
addSuccessCssClassToField: "success"
addFailureCssClassToField: "failure"
});

data-prompt-positio

這個參數，可以給提示信息的位置進行細調，當元素周圍有內容，不希望被提示信息遮擋時，可以通過該參數來調整，例如：驗證碼的圖片通常都是在輸入框的右邊，那么可以將提示信息調到驗證碼圖片的右邊。

這個參數不是調用時使用的，是直接寫在元素上，
<input class="validate[required]" type="text" data-prompt-position="centerRight:100,0">
編碼格式：使用UTF-8

請確保您的編輯器使用的字符編碼??為UTF-8，沒有字節順序標記。在html模板或文檔中通過 來

定義編碼格式。關於編碼格式參考 Character Sets & Encodings in XHTML, HTML and CSS

6.注釋

根據需要解釋代碼，這個就不多說了，團隊開發這個非常重要，盡管很多時候大家不願意遵守，但確實重要!!!

7.TODO待定項

尚未實現的或待定的內容一定要標識強調出來，利用TODO辨識，而非其他諸如@@來強調。

在todo項中如果有必要列明聯系人，比如負責人

在TODO后追加一個冒號作為行動內容，例如 TODO：為美瑞網增加html5http://www.sc.hrss.gov.cn/模板

8.文檔類型：使用HTML5

使用.HTML(text/html)類型文件相對XHTML(alication/xhtml+xml)文件，在瀏覽器及框架支持上和優化空間上都要好很多。

9.HTML 合法性驗證

合法的使用HTML，並利用w3c的工具(W3C HTML validator)進行檢查。唯一例外就是因為性能原因需要壓縮文件大小。

原文如下：Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size. 但這個確實很難想象，省略標簽節省的文件大小能有多少字節？但帶來的問題可是風險居高哦