时间戳

首页 > 解决方案 > 到处都使用同一个类的 Javascript 验证

javascript - 到处都使用同一个类的 Javascript 验证

问题描述

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

<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 函数？？谢谢

标签： javascriptjquerycss

解决方案

您可以使用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" />

推荐阅读