在任何地方都使用相同的类进行Javascript验证

我有相同的输入类，输入以下几页：

<input type="text" name="studentID" id="studentID" class="form-control student-id"/>

<input type="text" class="form-control student-id" onchange="validateStudentId()" name="studentid" size="10" maxlength="7" />

为了完成这项工作，我已经做了以下工作：

<input type="text" name="studentID" id="studentID" class="form-control student-id"/>

<input type="text" class="form-control student-id" onchange="validateStudentId()" name="studentid" size="10" maxlength="7" />

添加了onchange函数。有没有更好的办法

因为每次调用函数时，我都必须执行此

onchange

操作。 所以我想要的是只给出类名，它将使用类名自动验证字段

给我提个好主意吧，只是不想每次都写一次改变函数？？

---

谢谢

您可以使用

document.querySelectorAll（'input.student id'）

选择该类的所有输入，然后在节点列表上使用

.forEach（）

对它们进行迭代，并对每个输入调用验证函数

我还用纯JavaScript替换了jQuery调用，因为它对于这个用例来说非常简单。我切换了长度检查之前的数值检查，因为这对我来说更符合逻辑

函数validateStudentId（输入）{
var studentId=输入；
var id=studentId.value；
console.log（'length:'+id.length）；
if（isNaN（id））{
警报（'输入的输入不是数字'）；
inputEl.value=“”；
返回；
}
如果（id.length>7）{
警报（'请输入有效的学生id'）；
inputEl.value=“”；
返回；
}
}
document.querySelectorAll（'input.student id'）.forEach（函数（inputEl）{
inputEl.addEventListener（'change'，function（）{
验证学生身份（本）；
});
});

因为每次我都要进行一次函数调用
到底是什么让你感到不安？您不想将
onchange
属性添加到标记中，还是什么？是。也许是它的标记。我不知道。我只是不想每次都写一个onchange函数。只需要给类名“student id”，它就会自动验证@当然，你能用Javascript将监听器附加到
学生id
上吗？请再读一遍。我有50多页的相同验证。并将在未来添加新页面。所以我不想每次都写“onchange”函数。dupe的“show/hide”是“validate”。不过，使用的逻辑是相同的，它允许您动态添加onchange处理程序，而不是内联。它应该在“on change”类型下工作。不过，这段代码应该给了您正确的想法。否则，它会有一个令人不快的“为我编写的代码！”。只需切换按钮上的click事件监听器，在迭代中的每个输入上都有一个change事件监听器。尽管如此，我还是更新了这个片段。