基於jquery的validationEngine表單驗證插件，根據官網提示，該插件支持IE6-8，Chrome瀏覽器，火狐，Safari，Opera 10，但由於有使用到了css3的陰影和圓角樣式，所以在IE瀏覽器下無法看到圓角和陰影效果(IE 9 支持圓角效果)，整體來說還是不錯的。
1.默認校驗規則
| 名稱 |
示例 |
說明 |
|---|---|---|
| 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]] |
驗證電話號碼 |
| |
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]] |
調用外部函數
|
驗證規則均寫在 validate[] 中，如有多條規則，用英文逗號(,) 分割，如：
<input type="text" name="first_name" class="validate[required,minSize[6],custom[onlyLetterNumber]]">
2.引用
<link rel="stylesheet" href="assets/formvalidation/validationengine/css/jquery.validationEngine.min.css">
<script src="assets/formvalidation/validationengine/js/lang/jquery.validationEngine-zh_CN.js"></script> <script src="assets/formvalidation/validationengine/js/jquery.validationEngine.min.js"></script>
3.初始化:
<script> $("#form_validate_tooltip").validationEngine(); </script>
4.可以自定義提示內容
(function($){ $.fn.validationEngineLanguage = function(){ }; $.validationEngineLanguage = { newLang: function(){ $.validationEngineLanguage.allRules = { "required": { // Add your regex rules here, you can take telephone as an example "regex": "none", "alertText": "* 此處不可空白", "alertTextCheckboxMultiple": "* 請選擇一個項目", "alertTextCheckboxe": "* 您必須鈎選此欄", "alertTextDateRange": "* 日期范圍不可空白" }, "requiredInFunction": { "func": function(field, rules, i, options){ return (field.val() == "test") ? true : false; }, "alertText": "* Field must equal test" }, "dateRange": { "regex": "none", "alertText": "* 無效的 ", "alertText2": " 日期范圍" }, "dateTimeRange": { "regex": "none", "alertText": "* 無效的 ", "alertText2": " 時間范圍" }, "minSize": { "regex": "none", "alertText": "* 最少 ", "alertText2": " 個字符" }, "maxSize": { "regex": "none", "alertText": "* 最多 ", "alertText2": " 個字符" }, "groupRequired": { "regex": "none", "alertText": "* 你必需選填其中一個欄位" }, "min": { "regex": "none", "alertText": "* 最小值為 " }, "max": { "regex": "none", "alertText": "* 最大值為 " }, "past": { "regex": "none", "alertText": "* 日期必需早於 " }, "future": { "regex": "none", "alertText": "* 日期必需晚於 " }, "maxCheckbox": { "regex": "none", "alertText": "* 最多選取 ", "alertText2": " 個項目" }, "minCheckbox": { "regex": "none", "alertText": "* 請選擇 ", "alertText2": " 個項目" }, "equals": { "regex": "none", "alertText": "* 請輸入與上面相同的密碼" }, "creditCard": { "regex": "none", "alertText": "* 無效的信用卡號碼" }, "phone": { // credit: jquery.h5validate.js / orefalo "regex": /^([\+][0-9]{1,3}[ \.\-])?([\(]{1}[0-9]{2,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/, "alertText": "* 無效的電話號碼" }, "email": { // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/ "regex": /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "alertText": "*郵箱地址地址無效,例如 abc@gmail.com" }, "integer": { "regex": /^[\-\+]?\d+$/, "alertText": "* 不是有效的整數" }, "number": { // Number, including positive, negative, and floating decimal. credit: orefalo "regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/, "alertText": "* 無效的數字" }, "date": { "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/, "alertText": "* 無效的日期，格式必需為 YYYY-MM-DD" }, "ipv4": { "regex": /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/, "alertText": "* 無效的 IP 地址" }, "url": { "regex": /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i, "alertText": "* 無效的URL地址" }, "onlyNumberSp": { "regex": /^[0-9\ ]+$/, "alertText": "* 只能填數字" }, "onlyLetterSp": { "regex": /^[a-zA-Z\ \']+$/, "alertText": "* 只接受英文字母大小寫" }, "onlyLetterNumber": { "regex": /^[0-9a-zA-Z]+$/, "alertText": "* 不接受特殊字符" }, // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings "ajaxUserCall": { "url": "ajaxValidateFieldUser", // you may want to pass extra data on the ajax call "extraData": "name=eric", "alertText": "* 此名稱已被其他人使用", "alertTextLoad": "* 正在確認名稱是否有其他人使用，請稍等。" }, "ajaxUserCallPhp": { "url": "phpajax/ajaxValidateFieldUser.php", // you may want to pass extra data on the ajax call "extraData": "name=eric", // if you provide an "alertTextOk", it will show as a green prompt when the field validates "alertTextOk": "* 此帳號名稱可以使用", "alertText": "* 此名稱已被其他人使用", "alertTextLoad": "* 正在確認帳號名稱是否有其他人使用，請稍等。" }, "ajaxNameCall": { // remote json service location "url": "ajaxValidateFieldName", // error "alertText": "* 此名稱可以使用", // if you provide an "alertTextOk", it will show as a green prompt when the field validates "alertTextOk": "* 此名稱已被其他人使用", // speaks by itself "alertTextLoad": "* 正在確認名稱是否有其他人使用，請稍等。" }, "ajaxNameCallPhp": { // remote json service location "url": "phpajax/ajaxValidateFieldName.php", // error "alertText": "* 此名稱已被其他人使用", // speaks by itself "alertTextLoad": "* 正在確認名稱是否有其他人使用，請稍等。" }, "validate2fields": { "alertText": "* 請輸入 HELLO" }, //tls warning:homegrown not fielded "dateFormat":{ "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(?:(?:0?[1-9]|1[0-2])(\/|-)(?:0?[1-9]|1\d|2[0-8]))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(0?2(\/|-)29)(\/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:\d\d)?(?:0[48]|[2468][048]|[13579][26]))$/, "alertText": "* 無效的日期格式" }, //tls warning:homegrown not fielded "dateTimeFormat": { "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1}$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^((1[012]|0?[1-9]){1}\/(0?[1-9]|[12][0-9]|3[01]){1}\/\d{2,4}\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1})$/, "alertText": "* 無效的日期或時間格式", "alertText2": "可接受的格式： ", "alertText3": "mm/dd/yyyy hh:mm:ss AM|PM 或 ", "alertText4": "yyyy-mm-dd hh:mm:ss AM|PM" } }; } }; $.validationEngineLanguage.newLang(); })(jQuery);
留着以后開發時用，感覺很美觀！
還有兩種風格,可以去最代碼查看且提供demo