多个文本框的 Javascript 验证

Question

我在弄清楚如何使用 js 验证我的文本框时遇到了一些问题。我有 10 个文本框，用户可以填写 1-10 中的任意数字，但不能填写 0。这是我编写的 js，但它仅在所有 10 个文本框都已填满时才返回 true，而不是仅检查一个是否填满填满。

    function submitIt() {
    if (document.isForm.Student_ID.value == null) {
        alert ("You must enter a Colleague ID.");
        return false;
    } else {
        return true;
    }
}

这是表格......

<form name="isForm" onSubmit="return submitIt()">
    <input name="Student_ID" type="text" id="idField1" />
    <input name="Student_ID" type="text" id="idField2" />
    <input name="Student_ID" type="text" id="idField3" />
    <input name="Student_ID" type="text" id="idField4" />
    <input name="Student_ID" type="text" id="idField5" />
    <input name="Student_ID" type="text" id="idField6" />
    <input name="Student_ID" type="text" id="idField7" />
    <input name="Student_ID" type="text" id="idField8" />
    <input name="Student_ID" type="text" id="idField9" />
    <input name="Student_ID" type="text" id="idField10" />
    <input name="SUBMIT" type="submit" />
</form>

我知道我可以更改所有名称，并检查每个名称，但我正在努力避免代码中出现太多困惑，并且很好奇执行此操作的最佳方法。感谢任何帮助，谢谢!

Answer 1

您可以使用 document.getElementsByName 获取所有这些文本框的集合。然后遍历它们，并确保至少有一个被填充:

var allTbs = document.getElementsByName("Student_ID");
var valid = false;
for (var i = 0, max = allTbs.length; i < max; i++) {
    if (allTbs[i].value) { 
       valid = true;
       break;
    }
}

DEMO