我有一个表格：
<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 或其他库。我还想将迭代限制为表单元素，而不是可以添加到表单的任何其他元素。
您需要获取表单的引用，然后您可以迭代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")
}
你基本上会省下一张支票。
现代 ES6 方法。使用您喜欢的任何方法选择表格。使用展开运算符将 HTMLFormControlsCollection 转换为 Array，则该forEach方法可用。[...form.elements].forEach
更新：Array.from是一个更好的选择来传播Array.from(form.elements)它稍微清晰的行为。
下面的示例遍历表单中的每个输入。您可以通过检查过滤掉某些输入类型input.type != "submit"
const forms = document.querySelectorAll('form');
const form = forms[0];
Array.from(form.elements).forEach((input) => {
console.log(input);
});<div>
<h1>Input Form Selection</h1>
<form>
<label>
Foo
<input type="text" placeholder="Foo" name="Foo" />
</label>
<label>
Password
<input type="password" placeholder="Password" />
</label>
<label>
Foo
<input type="text" placeholder="Bar" name="Bar" />
</label>
<span>Ts & Cs</span>
<input type="hidden" name="_id" />
<input type="submit" name="_id" />
</form>
</div>您可以使用getElementsByTagName函数，它返回具有给定标签名称的元素的 HTMLCollection。
var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
if(elements[i].value == "") {
alert('empty');
//Do something here
}
}
document.myform.getElementsByTagName如果您已为 yoy 表格命名，您也可以使用
您可以像这样迭代命名字段：
let jsonObject = {};
for(let field of form.elements) {
if (field.name) {
jsonObject[field.name] = field.value;
}
}
或者，如果您只需要提交字段：
function formDataToJSON(form) {
let jsonObject = {};
let formData = new FormData(form);
for(let field of formData) {
jsonObject[field[0]] = field[1];
}
return JSON.stringify(jsonObject);
}
Es5 forEach：
Array.prototype.forEach.call(form.elements, function (inpt) {
if(inpt.name === name) {
inpt.parentNode.removeChild(inpt);
}
});
否则可爱的：
var input;
for(var i = 0; i < form.elements.length; i++) {
input = form.elements[i];
// ok my nice work with input, also you have the index with i (in foreach too you can get the index as second parameter (foreach is a wrapper around for, that offer a function to be called at each iteration.
}
<form id="yourFormName" >
<input type="text" value="" id="val1">
<input type="text" value="" id="val2">
<input type="text" value="" id="val3">
<button type="button" onclick="yourFunction()"> Check </button>
</form>
<script type="text/javascript">
function yourFunction()
{
var elements = document.querySelectorAll("#yourFormName input[type=text]")
console.log(elements);
for (var i = 0; i<elements.length; i++ )
{
var check = document.getElementById(elements[i].id).value);
console.log(check);
// write your logic here
}
}
</script>
$(function() {
$('form button').click(function() {
var allowSubmit = true;
$.each($('form input:text'), function(index, formField) {
if($(formField).val().trim().length == 0) {
alert('field is empty!');
allowSubmit = false;
}
});
return allowSubmit;
});
});