javascript - 如何使用 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 或其他库。我还想将迭代限制为表单元素，而不是可以添加到表单的任何其他元素。

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")
}

基本上您将节省一张支票。