form-validation--表單驗證插件

時間  2019-11-12
標籤 form validation 表單 驗證 插件 欄目 HTML 简体版
原文   原文鏈接

基於jquery的validationEngine表單驗證插件，根據官網提示，該插件支持IE6-8，Chrome瀏覽器，火狐，Safari，Opera 10，但因爲有使用到了css3的陰影和圓角樣式，因此在IE瀏覽器下沒法看到圓角和陰影效果(IE 9 支持圓角效果)，總體來講仍是不錯的。php

1.默認校驗規則 css

名稱jquery

示例css3

說明ajax

requiredjson

validate[required]瀏覽器

表示必填項less

optionalide

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]]

調用外部函數

 

驗證規則均寫在 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);
View Code

 

留着之後開發時用，感受很美觀！

還有兩種風格,能夠去最代碼查看且提供demo

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程