javascript - 验证用户输入以防止重复 ID

Question

每次用户输入用户 ID、名字、姓氏并单击按钮时，我都会尝试创建新的“学生”对象。 我想到目前为止我已经做到了这一点，但我正在努力确保无法添加多个具有相同 ID 的学生。我认为循环使用两个不同的变量可能是隔离潜在重复项的最佳方法，但我看到警报消息的唯一一次是当实际上没有任何重复项时。有人能把我推向正确的方向吗？

这是我的代码:

<form>
ID Number:<br>
<input type="text" id="idNumber">
<br>
First name:<br>
<input type="text" name="firstName" id="fName">
<br>
Last name:<br>
<input type="text" name="lastName" id="lName">
</form>
<br>
<button type ="submit" onclick="myFunction(list)">Submit</button>
<div id = "container">
<ul id="list"></ul>
</div>

<script>
function myFunction(list){

    var ids =[];
    var student = new Object();
    student.idNo = document.getElementById("idNumber").value;

    student.firstName = document.getElementById("fName").value;
    student.lastName = document.getElementById("lName").value;

    for(var i = 0; i < 10; i++){
        for(var j = 1; j < 10 ; i++){
        ids.push(student.idNo);
        if(ids[i] == ids[j]){
        alert("Id already exists");
        }
        }
    }

    var text = " "+student.idNo+" "+student.firstName+" "+student.lastName;

    var li = document.createElement("li");
    li.addEventListener("mouseover", mouseOver, false);
    //li.addEventListener("click", mouseClick, false);
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}


</script>

Answer 1

这是一个工作片段。您的 ìds 始终设置为空数组，因为它位于您的函数内

  var ids = [];

  function myFunction(list) {
    var student = new Object();
    student.idNo = document.getElementById("idNumber").value;
    student.firstName = document.getElementById("fName").value;
    student.lastName = document.getElementById("lName").value;

    if (ids.indexOf(student.idNo) == -1) {
      
      ids.push(student.idNo);
      var text = " " + student.idNo + " " + student.firstName + " " + student.lastName;
      var li = document.createElement("li");
      var node = document.createTextNode(text);
      li.appendChild(node);
      document.getElementById("list").appendChild(li);
      
    } else {
      
      alert("Duplicated ID");
      
    }


  }

<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" name="firstName" id="fName">
  <br>Last name:
  <br>
  <input type="text" name="lastName" id="lName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>
<div id="container">
  <ul id="list"></ul>
</div>