如何检测输入字段值的重复？

假设您正在制作一个注册表单，其中您正在获取用户的电话号码。现在，您想向用户询问四个替代联系号码。您要确保用户提供的所有四个联系号码都应该不同。

此功能可以通过两种方式实现：

1. 在提交表单之前输入时：为此，我们可以使用 HTML 本身提供的“oninput”事件，当输入字段的输入发生变化时，触发 javascript 中指定的函数
2. 提交表单后：为此，我们可以使用 HTML 提供的“onsubmit”或“onclick”事件，它们适用于按钮。 “onclick”事件适用于按钮，而“onsubmit”事件适用于表单

下面的示例说明了这两种方法：

示例 1：

HTML

    
    
    function gfg_check_duplicates() {
       var myarray = [];
       for (i = 0; i < 4; i++) {
         myarray[i] = 
          document.getElementById("gfg_field" + i).value;
                }
         for (i = 0; i < 4; i++) {
            for (j = i + 1; j < 4; j++) {
               if (i == j || myarray[i] == "" || myarray[j] == "") 
                    continue;
                   if (myarray[i] == myarray[j]) {
                   document.getElementById("status" + i)
                     .innerHTML = "duplicated values!";
                   document.getElementById("status" + j)
                    .innerHTML = "duplicated values!";
                        }
                    }
                }
            }
        
    
    
        Ph no1:
        
        
        
        Ph no2:
        
        
        
        Ph no3:
        
        
        
        Ph no4:
        
        
        
    

输出：

示例 2：在此示例中，我们将显示哪些值是相同的，并且在我们更改输入时动态工作。

HTML

  
    
    function gfg_check_duplicates() {
     var myarray = [];
     for (i = 0; i < 4; i++) {
      document.getElementById("status" + i).innerHTML = "";
      myarray[i] =
      document.getElementById("gfg_field" + i).value;
         }
     for (i = 0; i < 4; i++) {
      var flag = false;
        for (j = 0; j < 4; j++) {
          if (i == j || myarray[i] == "" || myarray[j] == "") 
             continue;
          if (myarray[i] == myarray[j]) {
             flag = true;
           document.getElementById("status" + i).innerHTML += 
             "<br>Its identical to the phone number " + (j + 1);
                        }
                    }
          if (flag == false) 
            document.getElementById("status" + i).innerHTML = "";
                }
            }
        
    
    
        Phone no. 1
        
        
        Phone no. 2
        
        
        Phone no. 3
        
        
        Phone no. 4
        
        
        
    

输出：

HTML

  
    
       function gfg_check_duplicates() {
         var myarray = [];
         for (i = 0; i < 4; i++) {
         document.getElementById("status" + i).innerHTML = "";
         myarray[i] = 
         document.getElementById("gfg_field" + i).value;
         }
         for (i = 0; i < 4; i++) {
          var flag = false;
          for (j = 0; j < 4; j++) {
            if (i == j || myarray[i] == "" || myarray[j] == "") 
                continue;
            if (myarray[i] == myarray[j]) {
                flag = true;
             document.getElementById("status" + i).innerHTML += 
             "<br>Its identical to the phone number " + (j + 1);
                        }
                    }
             if (flag == false) 
          document.getElementById("status" + i).innerHTML = "";
                }
            }
        
    
    
        Phone no. 1
        
        
        Phone no. 2
        
        
        Phone no. 3
        
        
        Phone no. 4
        
        
        
        
          Check for Duplicates !
        
    

输出：