8

我有一个表单验证脚本，不幸的是，它Stack overflow at line 0在崩溃（IE7）之前不久返回了警告框，并且在 IE8 中直接崩溃了（它确实首先工作，非常缓慢）。

我为您的测试乐趣制作了一个 jsFiddle：http: //jsfiddle.net/yuNXm/2/在您将一个值输入到需要验证的输入中然后失去焦点后发生堆栈溢出。（电子邮件字段是 ajax 驱动的，所以不会在那里工作）。

相关的Javascript：

jQuery(document).ready(function($) {

    var inputs = $('input[data-validation-method]');
    var fields = $();
    var classes = ['fail', 'win'];

    //Methods of validation, must return an object like so {result: [boolean], message: [string or false]} as a parameter of the callback() function;
    var methods = {

        'email' : function(field, dependancies, callback) {
            var value = field.val();
            var response = false;
            field.addClass("loading");
            $.post(
               ajaxData.url, 
               {
                  'action':'validate_form',
                  'value': value,
                  'method': field.data('method')
               }, 
               function(response){
                   return callback(response);
               }
            ).complete(function() {
                field.removeClass("loading");
            });
        },

        'password' : function(field, dependancies, callback) {
            var value = field.val();
            var response = {};
            if (value.length < 8) {
                response.result = false;
                response.message = 'Your password must be a minimum of 8 characters';
            } else {
                response.result = true;
                response.message = false;
            }
            return callback(response);
        },

        'verify_password' : function(field, dependancies, callback) {
            var value = field.val();
            var response = {};
            if (value != dependancies["password"].val()) {
                if (!dependancies["password"].val() || !value) {
                    return false;
                }
                response.result = false;
                response.message = 'Passwords do no match';
            } else {
                response.result = true;
                response.message = false;
            }
            return callback(response);
        }
    }

    // Prepare fields for validation
    inputs.each(function() {
        createField($(this));
    });

    function createField (field) {
        inputs = inputs.not(field);
        var method = field.attr('data-validation-method');
        var requires = field.attr('data-validation-requires');
        if (!!requires) {
            requires = requires.split(',');
            var dependancies = {};
            $.each(requires, function(key, value) {
                var element = $('#' + value);
                if(element.length) {
                    dependancies[element.attr('id')] = element;
                    if(inputs.find(element).length) {
                        createField(element);
                    }
                    if ($.isArray(element.data('linked_fields'))) {
                        element.data('linked_fields').push(field);
                    } else {
                        element.data('linked_fields', [field]);
                    }
                }
            });
        }
        if (methods[method]) {
            fields = fields.add('#' + field.attr('id'));
            field.data('method', method);
            field.data('dependancies', dependancies);
        }
    }

    function validate (field) {
        var callback = function(response) {
            field.data('response', response);
            if (response) {
                toggleFlag(field, 'show');
            } else {
                toggleFlag(field, 'remove');
            }
            if($.isArray(field.data('linked_fields'))) {
                $.each(field.data('linked_fields'), function(key, value) {
                    validate(value);
                });
            }
        }
        methods[field.data('method')](field, field.data('dependancies'), callback);
    }

    fields.focus(function() {
        var field = $(this);
        field.data("value", field.val());
        field.bind("propertychange keyup input paste", function(event){
            if(field.data("response") && (field.val() != field.data("value"))) {
                toggleFlag(field, "hide");
                if($.isArray(field.data('linked_fields'))) {
                    $.each(field.data('linked_fields'), function(key, value) {
                        toggleFlag(value, "hide");
                    });
                }
            }
        });
    });

    fields.blur(function() {
        var field = $(this);
        if (field.val().length) {
            if (field.val() != field.data("value")) {
                toggleFlag(field, "remove");
                validate(field);
            } else {
                toggleFlag(field, "show");
            }
        } else {
            toggleFlag(field, "remove");
        }
    });

    function toggleFlag (field, method) {
        var flag = field.data("flag");
        var response = field.data("response");
        if (response) {
            switch (method) {
                case "show":
                    if (response.message) {
                        if(!flag) {
                            flag = $('<span class="pie ' + classes[~~response.result] + '">' + response.message + '</span>').insertAfter(field);
                            field.data("flag", flag);
                            flag.hide();
                        }
                        if (!flag.data("active")) {
                            flag.data("active", true);
                            flag.stop(true, true).animate({height: "show", opacity: "show"}, 500);
                        }
                    }
                    field.addClass(classes[~~response.result]);
                    break;
                case "hide":
                    if (flag) {
                        if (flag.data("active")) {
                            flag.data("active", false);
                            flag.stop(true, true).animate({height: "hide", opacity: "hide"}, 500);
                        }
                    }
                    field.removeClass(classes[~~response.result]);
                    break;
                case "remove":
                    if (flag) {
                        field.removeData("flag");
                        if (flag.data("active")) {
                            flag.stop(true, true).animate({height: "hide", opacity: "hide"}, 100, function() {
                                flag.remove();
                            });
                        }
                    }
                    field.removeClass(classes[~~response.result]);
                    field.removeData("response");
                    break;
            }
        }
    }

});

相关的 HTML：

<form action="" method="post" class="user-data">
<div class="fields">
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" data-validation-method="email" class="text" value="" placeholder="youremail@somesite.com" />
    <span class="info">We won\'t do anything cheeky with your email... promise.</span>
    <label for="password">Choose a password:</label>
    <input type="password" name="password" id="password" data-validation-method="password" class="text" value="" />
    <label for="verify_password">Retype your password:</label>
    <input type="password" name="verify_password" id="verify_password" class="text" data-validation-method="verify_password" data-validation-requires="password" value="" />
    <input type="checkbox" name="mailing_list" value="true" /> <label for="mailing_list">I would like to recieve email updates about new features</label>
    <span class="info">We won\'t spam your inbox, emails will be infrequent.</span>
</div>
<input type="submit" id="submitbtn" class="button omega" name="submit" value="Create your account" />
</form>

现在我知道这通常是由于递归，我在脚本的两个区域使用递归。

重复功能编号 1：

function createField (field) {
    inputs = inputs.not(field);
    var method = field.attr('data-validation-method');
    var requires = field.attr('data-validation-requires');
    if (!!requires) {
        requires = requires.split(',');
        var dependancies = {};
        $.each(requires, function(key, value) {
            var element = $('#' + value);
            if(element.length) {
                dependancies[element.attr('id')] = element;
                if(inputs.find(element).length) {
                    createField(element);
                }
                if ($.isArray(element.data('linked_fields'))) {
                    element.data('linked_fields').push(field);
                } else {
                    element.data('linked_fields', [field]);
                }
            }
        });
    }
    if (methods[method]) {
        fields = fields.add('#' + field.attr('id'));
        field.data('method', method);
        field.data('dependancies', dependancies);
    }
}

因为堆栈溢出仅在您与需要验证的输入交互时发生，并且该createField函数仅用作初始化函数，我认为不是这个。

重复功能编号 2：

function validate (field) {
    var callback = function(response) {
        field.data('response', response);
        if (response) {
            toggleFlag(field, 'show');
        } else {
            toggleFlag(field, 'remove');
        }
        if($.isArray(field.data('linked_fields'))) {
            $.each(field.data('linked_fields'), function(key, value) {
                validate(value);
            });
        }
    }
    methods[field.data('method')](field, field.data('dependancies'), callback);
}

我无权访问任何其他外部程序来调试它（企业环境），有人可以在这里引导我走向正确的方向吗？

4

1 回答 1

12

propertychange每当您使用jQueryaddClass或removeClass. 问题代码在这里：

     var field = $(this);
        field.data("value", field.val());
        field.bind("propertychange keyup input paste", function(event){
            if(field.data("response") && (field.val() != field.data("value"))) {
                toggleFlag(field, "hide");
                if($.isArray(field.data('linked_fields'))) {
                    $.each(field.data('linked_fields'), function(key, value) {
                        toggleFlag(value, "hide");
                    });
                }
            }
      });

在您的toggleFlag函数中，您调用 jQueryaddClass和removeClass. 这创建了导致堆栈溢出的无限递归循环。

如果你把它拿出来，propertychange它在 Internet Explorer 以及所有其他浏览器上都能很好地工作。

工作示例：http: //jsfiddle.net/yuNXm/9/

您仅在 Internet Explorer 上遇到此问题的原因是onpropertychange是 Microsoft 为 Internet Explorer 实现的专有事件。它没有被其他浏览器实现。

使用 IE6-8 调试堆栈溢出：

将来可以用来诊断这些类型的堆栈溢出的一个好方法是：

  1. 确定与无限递归循环有关的函数之一。如果你被 IE6-8 卡住而没有调试能力，那么这需要在各种函数中放置警报，直到你找到一个无限循环的函数。

  2. 将这行代码放在函数的顶部：

    alert(arguments.callee.caller.toString());

此警报将告诉您哪个函数正在调用无限循环函数。然后通过追溯无限递归循环中涉及哪些函数，您可以隔离您需要仔细检查无限循环原因的代码部分。

当然，如果您有一个带有适当调试工具的现代 Web 浏览器，那么这不是必需的——您只需单步调试代码即可。

顺便说一句，我感觉到你的痛苦。我的部分工作还涉及为企业客户编写 JavaScript，IE6-8 通常是他们的 IT 部门强加的浏览器。没有调试工具，只有警报和评论；当您解决堆栈溢出问题时，甚至没有可用的行号。

于 2012-08-08T00:33:29.817 回答