javascript - 空验证在特定的空文本框中不起作用

Question

我有几个类似的文本框。当我运行下面给出的验证脚本时，其中一个第一次不会受到影响，即使它是空的。我想知道为什么。

以下是 HTML:

<input type='text' class='txt' value="" />
<input type='text' class='txt' value="" />
<input type='text' class='txt' value="" />
<input type='button' onclick='validate()' value='validate' />

JS:

function validate() {
 var txts = document.getElementsByClassName('txt');
 for (var i = 0; i < txts.length; i++) {
    if(txts[i].value === "")
       txts[i].className = 'txtError';
 }
}

和CSS:

.txt {
  border:1 px solid green;
}
.txtError {
  border:1 px solid blue;
  background:red;
}

这可能是一个愚蠢的错误，但我盯着它看了很多次，但我的眼睛目前什么也没有捕捉到。我也在不同的浏览器中尝试过。

这是一个JSfiddle演示问题。

旁注:我不是在寻找另一个验证脚本，我只是想知道为什么第二个文本框逃脱了验证。

Answer 1

因为getElementsByClassName返回一个实时集合。这意味着当您更改 DOM 时，它会在您的下方更新。因此，当您从第一个框中删除 txt 类(用 txtError 替换它)时，您会突然得到一个大小为 2 而不是 3 的枚举。

要修复此问题，您可以使用数组切片技巧将实时集合转换为常规数组

    var txts = Array.prototype.slice.call(document.getElementsByClassName('txt'), 0);

但是，有更好的方法可以实现您在这里所做的几乎所有事情。所以并不是真正讨论这个问题的地方，但是一旦你让它工作起来，就可以把它发布在 the codereview stackexchange 上。寻求反馈。