在 jquery 验证引擎中验证 keyup 事件上的电子邮件字段



我想在jquery验证引擎中验证keyup事件的电子邮件文本字段。(仅限电子邮件文本字段)。如何在jquery验证引擎中完成?

这是 html:

<input type="text" name="email" id="email" class="validate[required,custom[email]]"  />

这是JS:

    (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": "* Dieses Feld ist erforderlich",
                        "alertTextCheckboxMultiple": "* Please select an option",
                        "alertTextCheckboxe": "* This checkbox is required",
                        "alertTextDateRange": "* Both date range fields are required"
                    },
                    "Marke": {
                        "regex": /^s*[0-9a-zA-Z][0-9a-zA-Z ]*$/ || "none",
                        "alertText": "* Bitte Marke angeben"
                    },
                    "requiredInFunction": { 
                        "func": function(field, rules, i, options){
                            return (field.val() == "test") ? true : false;
                        },
                        "alertText": "* Field must equal test"
                    },
                    "dateRange": {
                        "regex": "none",
                        "alertText": "* Invalid ",
                        "alertText2": "Date Range"
                    },
                    "dateTimeRange": {
                        "regex": "none",
                        "alertText": "* Invalid ",
                        "alertText2": "Date Time Range"
                    },
                    "minSize": {
                        "regex": "none",
                        "alertText": "* Minimum ",
                        "alertText2": " characters allowed"
                    },
                    "maxSize": {
                        "regex": "none",
                        "alertText": "* Maximum ",
                        "alertText2": " characters allowed"
                    },
                    "groupRequired": {
                        "regex": "none",
                        "alertText": "* You must fill one of the following fields"
                    },
                    "min": {
                        "regex": "none",
                        "alertText": "* Minimum value is "
                    },
                    "max": {
                        "regex": "none",
                        "alertText": "* Maximum value is "
                    },
                    "past": {
                        "regex": "none",
                        "alertText": "* Date prior to "
                    },
                    "future": {
                        "regex": "none",
                        "alertText": "* Date past "
                    },  
                    "maxCheckbox": {
                        "regex": "none",
                        "alertText": "* Maximum ",
                        "alertText2": " options allowed"
                    },
                    "minCheckbox": {
                        "regex": "none",
                        "alertText": "* Please select ",
                        "alertText2": " options"
                    },
                    "equals": {
                        "regex": "none",
                        "alertText": "* Fields do not match"
                    },
                    "creditCard": {
                        "regex": "none",
                        "alertText": "* Invalid credit card number"
                    },
                    "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": "* Invalid phone number"
                    },
                    "email": {
                        // HTML5 compatible email regex ( http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#    e-mail-state-%28type=email%29 )
                        "regex": /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/,
                        "alertText": "* Invalid email address"
                    },
                    "integer": {
                        "regex": /^[-+]?d+$/,
                        "alertText": "* Not a valid integer"
                    },
                    "number": {
                        // Number, including positive, negative, and floating decimal. credit: orefalo
                        "regex": /^[-+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([.]([0-9]+))?$/,
                        "alertText": "* Invalid floating decimal number"
                    },
                    "date": {                    
                        //  Check if date is valid by leap year
                "func": function (field) {
                        var pattern = new RegExp(/^(d{4})[/-.](0?[1-9]|1[012])[/-.](0?[1-9]|[12][0-9]|3[01])$/);
                        var match = pattern.exec(field.val());
                        if (match == null)
                           return false;
                        var year = match[1];
                        var month = match[2]*1;
                        var day = match[3]*1;                   
                        var date = new Date(year, month - 1, day); // because months starts from 0.
                        return (date.getFullYear() == year && date.getMonth() == (month - 1) && date.getDate() == day);
                    },                      
                 "alertText": "* Invalid date, must be in YYYY-MM-DD format"
                    },
                    "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": "* Invalid IP address"
                    },
                    "url": {
                        "regex": /^(https?|ftp)://(((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:)*@)?(((d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]))|((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?)(:d*)?)(/((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)*)*)?)?(?((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()*+,;=]|:|@)|/|?)*)?$/i,
                        "alertText": "* Invalid URL"
                    },
                    "onlyNumberSp": {
                        "regex": /^[0-9 ]+$/,
                        "alertText": "* Numbers only"
                    },
                    "onlyLetterSp": {
                        "regex": /^[a-zA-Z ']+$/,
                        "alertText": "* Letters only"
                    },
                    "onlyLetterNumber": {
                        "regex": /^[0-9a-zA-Z]+$/,
                        "alertText": "* No special characters allowed"
                    },
                    // --- 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": "* This user is already taken",
                        "alertTextLoad": "* Validating, please wait"
                    },
                    "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": "* This username is available",
                        "alertText": "* This user is already taken",
                        "alertTextLoad": "* Validating, please wait"
                    },
                    "ajaxNameCall": {
                        // remote json service location
                        "url": "ajaxValidateFieldName",
                        // error
                        "alertText": "* This name is already taken",
                        // if you provide an "alertTextOk", it will show as a green prompt when the field validates
                        "alertTextOk": "* This name is available",
                        // speaks by itself
                        "alertTextLoad": "* Validating, please wait"
                    },
                     "ajaxNameCallPhp": {
                            // remote json service location
                            "url": "phpajax/ajaxValidateFieldName.php",
                            // error
                            "alertText": "* This name is already taken",
                            // speaks by itself
                            "alertTextLoad": "* Validating, please wait"
                        },
                    "validate2fields": {
                        "alertText": "* Please input 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]ddd|d[1-9]dd|dd[1-9]d|ddd[1-9])$|^(?:(?:0?[1-9]|1[0-2])(/|-)(?:0?[1-9]|1d|2[0-8]))(/|-)(?:[1-9]ddd|d[1-9]dd|dd[1-9]d|ddd[1-9])$|^(0?2(/|-)29)(/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:dd)?(?:0[48]|[2468][048]|[13579][26]))$/,
                        "alertText": "* Invalid Date"
                    },
                    //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]ddd|d[1-9]dd|dd[1-9]d|ddd[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": "* Invalid Date or Date Format",
                        "alertText2": "Expected Format: ",
                        "alertText3": "mm/dd/yyyy hh:mm:ss AM|PM or ", 
                        "alertText4": "yyyy-mm-dd hh:mm:ss AM|PM"
                    }
                };
            }
        };
        $.validationEngineLanguage.newLang();
    })
(jQuery);

还有其他字段,例如国家/地区下拉列表等,但我想在 keyup 事件上绑定电子邮件文本字段。 其他人应该以默认方法行事

通读 jQuery 验证引擎文档,您可以通过执行以下操作来验证字段:

$("#emailInput").validationEngine('validate');

为了在每次添加新字符时检查它,您可以执行以下操作:

$("#emailInput").on('keyup', function() {
    $(this).validationEngine('validate');
});

最新更新