JavaScript验证在各个地方使用同一类

Question

我有相同的输入类，输入几个页面如下：

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

我想使用同一类名称student-id，它将使用以下JS验证学生ID：

function validateStudentId(){
    var studentId= document.getElementsByClassName('student-id');
    if (studentId.length > 0) {
        var id = studentId[0].value;
        console.log('lengthe'+id.length);
        if(id.length > 7){
            alert('Please enter valid student id .');
            $('.student-id').val("");
            return;
        }
        if(isNaN(id)){
            alert('Entered input is not a number .');
            $('.student-id').val("");
            return;
        }
    }
}

要完成这项工作，我已经完成了以下操作：

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

添加了一个Onchange功能。有什么更好的方法吗？

coz我每次都必须进行此onchange功能调用。因此，我想要的是只给出类名称，它将使用类名称自动验证该字段。

建议我任何更好的主意，只是不想每次写Onchange功能？谢谢

Answer 1

您可以使用 document.querySelectorAll('input.student-id')选择该类别的所有输入，然后在节点列表上的 .forEach()在它们上迭代并调用它们的验证功能。

我还用普通的JavaScript替换了jQuery呼叫，因为对于此用例，它确实很简单。我切换了检查数字值的支票，以便在长度检查之前进行，因为这对我来说似乎更合乎逻辑。

function validateStudentId(inputEl) {
  var studentId = inputEl;
  var id = studentId.value;
  console.log('length: ' + id.length);
  if (isNaN(id)) {
    alert('Entered input is not a number .');
    inputEl.value = "";
    return;
  }
  if (id.length > 7) {
    alert('Please enter valid student id .');
    inputEl.value = "";
    return;
  }
}
document.querySelectorAll('input.student-id').forEach(function(inputEl) {
  inputEl.addEventListener('change', function() {
    validateStudentId(this);
  });
});

<input type="text" name="studentID" id="studentID" class="form-control student-id" value="abc" />
<input type="text" name="studentID2" id="studentID2" class="form-control student-id" value="1234567890" />
<input type="text" name="studentID3" id="studentID3" class="form-control student-id" value="123456" />