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函数。有没有更好的方法可以做到这一点。

因为我每次都必须执行此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" />

在任何地方都使用同一类进行Java验证

1 个答案: