我有一个表单验证脚本，不幸的是，它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);
}
我无权访问任何其他外部程序来调试它（企业环境），有人可以在这里引导我走向正确的方向吗？