如何使用 JavaScript 遍历表单元素？

Question

我有一个表格：

 <form method="POST" action="submit.php">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <button type="submit">Submit</button>
</form>

如何遍历表单中的输入元素（以便对它们执行一些验证）？

我宁愿只使用纯 JavaScript，而不是 jQuery 或其他库。我还想将迭代限制为表单元素，而不是可以添加到表单的任何其他元素。

原文由 Please Delete me 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要获取表单的引用，然后您可以迭代 elements 集合。因此，例如假设：

 <form method="POST" action="submit.php" id="my-form">
  ..etc..
</form>

你会有这样的东西：

 var elements = document.getElementById("my-form").elements;

for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text" && element.value === "")
        console.log("it's an empty textfield")
}

请注意，在支持 querySelectorAll 的浏览器中，您还可以执行以下操作：

 var elements = document.querySelectorAll("#my-form input[type=text][value='']")

您将在 elements 中拥有具有空值属性的元素。但是请注意，如果用户更改了值，属性将保持不变，因此此代码仅按属性而不是对象的属性进行过滤。当然，你也可以混合使用两种解决方案：

 var elements = document.querySelectorAll("#my-form input[type=text]")

for (var i = 0, element; element = elements[i++];) {
    if (element.value === "")
        console.log("it's an empty textfield")
}

你基本上会节省一张支票。

原文由 ZER0 发布，翻译遵循 CC BY-SA 3.0 许可协议