具有电子邮件验证功能的 JQuery 验证插件

Question

我目前正在使用 JQuery Validate 插件和一些提示插件来验证表单。我还需要验证电子邮件地址，然后仅检查所有字段是否已填写。我熟悉 Validate rules 函数，但是它导致了问题。

一旦电子邮件被评估为无效，在我当前的实现中，所有后续文本字段都将显示为无效(通过生成插件提示)，并导致所有后续字段都有一个恼人的提示:this在用户有机会填写之前，字段是必需的。

我想知道是否有一种方法可以检查我的电子邮件验证函数是否从 validate 调用中返回 true，如果它不返回 true，则认为表单无效。

稍后我将需要实现一个遵循相同逻辑的密码正则表达式函数。

我的表单验证

 $(".form").validate({
            errorPlacement: function(error, element) {
            },
            highlight: function(element, errorClass, validClass) {
                $(element).css('border', '1px solid red');
                $('.addlefttip').qtip({
                    position: {
                        my: 'middle left', 
                        at: 'middle right'
                    },
                    show: {
                        event: 'focus'
                    },
                    hide:{
                       event: 'blur'
                    },
                    style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                    $('.addtoptip').qtip({
                        position: {
                            my: 'bottom left', 
                            at: 'top right'
                        },
                        show: {
                            event: 'focus'
                        },
                        hide:{
                            event: 'blur'
                        },
                        style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                },
                rules: {
                    email: {
                        minlength: 5
                    }
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).css('border', '1px solid #ddd');
                }
            });

我的电子邮件验证:

    $('.email-field').change(function(){
            var email = $(this).val();

            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            if(re.test(email)) {
                document.getElementById('result').innerHTML = '<span style="color:green; font-style:italic; font-weight:normal;"><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/08/green-check-mark.png"> valid';
            } else {
                document.getElementById('result').innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/en/archive/8/89/20070603232424!RedX.png" style="width:15px; margin:-2px 0px 0px 0px;"/> invalid';
            }
        });

感谢任何建议!

非常感谢!

Answer 1

我想我没有完全理解你的实现。使用表单验证插件然后使用自定义 change 处理程序绕过其中的一部分似乎毫无意义。既然您使用的是 jQuery Validate 插件，为什么不直接使用它的 built-in email rule ？

否则，如果您更喜欢电子邮件功能，请使用 built-in addMethod() method 将其转换为自定义规则。 .

$.validator.addMethod("myCustomRule", function(value, element) { 
      return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value); 
}, "Custom message for this rule");

它的实现就像任何其他规则一样......

rules: {
   myfield: {
       myCustomRule: true
   }
}

<小时/>

就将 qTip2 与 jQuery Validate 结合使用而言，我是这样做的......

$(document).ready(function () {

    $('#myform').validate({ 
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).filter(':not(.valid)').qtip({
                overwrite: false,
                content: error,
                show: {
                    event: false,
                    ready: true
                },
                hide: false
            }).qtip('option', 'content.text', error);
        },
        success: function (error) {
            setTimeout(function () {
                $('form').find('.valid').qtip('destroy');
            }, 1);
        }
    });

});

演示，使用 qTip2 进行 jQuery 验证:http://jsfiddle.net/96AM4/

<小时/>

但是最近，我一直在使用 Tooltipster，因为它与 jQuery Validate 的集成更加清晰。

$(document).ready(function () {

    // initialize Tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

    // initialize jQuery Validate
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

<小时/>

旁注:

最好不要像这样将 callbcak 函数留空:

errorPlacement: function(error, element) {
},

如果您的目的是抑制默认错误消息，请使用此选项:

errorPlacement: function(error, element) {
    return false;
},

演示，使用 Tooltipster 进行 jQuery 验证:http://jsfiddle.net/kyK4G/