javascript - 如何循环遍历元素并为某些元素调用 onblur 处理程序

Question

我有一个例子，屏幕上有一堆文本框和单选按钮，全部都是用各种 DIV 动态构建的。所有文本框都有 onblur 例程来验证输入，但根据单选按钮的选择，文本框输入在最初有效时可能会无效。我无法将 onblur 与单选按钮一起使用，因为它们可以从单选按钮进入无效的文本框之一，并创建无限循环，因为我将焦点放在无效元素上。由于每个文本框都有其自己的 onblur 调用的特殊参数，因此我认为最好的方法是在提交表单时调用文本框的 onblur 事件确保所有条目对于他们选择的单选按钮配置仍然有效。如果 onblur 事件之一返回 false，我还需要它停止提交，以便他们可以纠正错误的文本框。这是我写的:

    for (var intElement = 0; intElement < document.forms[0].elements.length; intElement = intElement + 1)
    {
        if (document.forms[0].elements[intElement].name.substr(3) == "FactorAmount") // The first 3 characters of the name are a unique identifier for each field
        {
            if (document.forms[0].elements[intElement].onblur())
            {
                return false;
                break;
            }
        }
    }

return true;

我最初有 (!document.forms[0].elements[intElement].onblur())，但来自 onblur 事件的警报消息没有弹出当我有那个的时候。现在警报消息正在弹出，但如果遇到错误，它仍然会继续循环遍历元素。我已经用调试器两种方式逐步完成了这个过程，它似乎循环得很好，但它要么 1) 在需要时不停止并返回 false，要么 2) 不执行我的警报消息来告诉用户什么错误是。有人可以帮忙吗？这可能是我在做的一些愚蠢的事情。

被调用的 onblur 方法如下所示:

function f_VerifyRange(tagFactor, reaMin, reaMax, intPrecision, sLOB, sIL, sFactorCode)
{
    var tagCreditOrDebit;
    var tagIsTotal;
    var tagPercentageOrDecimal;
    
    eval("tagCreditOrDebit = document.forms[0]." + tagFactor.name.substr(0,3) + "CreditOrDebitC");

    eval("tagIsTotal = document.forms[0]." + tagFactor.name.substr(0,3) + "IsTotal");
    eval("tagPercentageOrDecimal = document.forms[0]." + tagFactor.name.substr(0,3) + "PercentageOrDecimal");

    if (tagPercentageOrDecimal.value == "P")
    {
        reaMax = Math.round((reaMax - 1) * 100);
        reaMin = Math.round((1 - reaMin) * 100);

        if (parseFloat(tagFactor.value) == 0)
        {
            alert("Please enter a value other than 0 or leave this field blank.");
            
            f_SetFocus(tagFactor);
            return false;
        }

        if (tagIsTotal.value == "True")
        {
            if (tagCreditOrDebit.checked)
            {
                if (parseFloat(tagFactor.value) > reaMin)
                {
                    alert("Please enter a value less than or equal to " + reaMin + "% for a credit or " + reaMax + "% for a debit.");
                    f_SetFocus(tagFactor);
                    return false;
                }
            }
            else
            {
                if (parseFloat(tagFactor.value) > reaMax)
                {
                    alert("Please enter a value less than or equal to " + reaMin + "% for a credit or " + reaMax + "% for a debit.");
                    f_SetFocus(tagFactor);
                    return false;
                }
            }
        }
    }

    return true;
}

编辑:我想我已经弄清楚为什么这没有按预期工作，但我仍然不知道如何完成我需要做的事情。下面一行:

if (!document.forms[0].elements[intElement].onblur())

或

if (document.forms[0].elements[intElement].onblur())

未返回单个onblur函数(f_VerifyRange)返回的内容。相反，无论如何它总是返回 true 或 false。在第一种情况下，它返回 true，然后在第一个文本框之后退出并中止提交，即使第一个文本框没有错误。在第二种情况下，它返回 false 并遍历所有框。即使可能存在错误(它显示的)，它也不认为存在任何错误，因此它继续提交。我想我真正需要的是如何从 f_VerifyRange 获取返回值，这是我的 onblur 函数。

Answer 1

这个问题对我来说有点太复杂了，但我会给你一些建议:

eval("tagCreditOrDebit = document.forms[0]." + tagFactor.name.substr(0,3) + "CreditOrDebitC");

这可以用更好的方式编写:

tagCreditOrDebit = document.forms[0][tagFactor.name.substr(0,3) + "CreditOrDebitC"];

在 javascript 中，任何可以使用点语法的地方都可以使用方括号。

document.body;
document['body'];
var b = 'body';
document[b];

此外，请考虑为您的表单提供某种标识符。我根本不知道为什么 document.forms[0] 是处理表单这么长时间的标准方法......如果您决定在页面上放置另一个表单在此表单之前，那么一切会坏的!

其他方法包括:

// HTML
<form name="myFormName">

// Javascript
var f = document.myFormName;

或

<form id="myFormId">

var f = document.getElementById("myFormId")