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

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

假设您正在制作一个注册表单,在其中输入用户的电话号码。现在,您想要要求用户提供四个备用联系电话。您想要确保用户提供的所有四个联系电话都不同。

这个功能可以通过两种方式实现:

  • 在提交表单之前输入时: 为此,我们可以使用HTML本身提供的“oninput”事件,每当输入字段中的输入发生变化时,它会触发在JavaScript中指定的函数。
  • 在提交表单后: 为此,我们可以使用HTML提供的“onsubmit”或“onclick”事件,它们适用于按钮。“onclick”事件适用于按钮,“onsubmit”事件适用于表单。

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

示例1: 在此示例中,我们将看到使用oninput方法检测重复值。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        detect the duplication of 
        values of input fields
    </title>
</head>
 
<body>
    Ph no1:
    <input id="gfg_field0"
           oninput="gfg_check_duplicates()" />
    <div id="status0"></div>
    <br />
    Ph no2:
    <input id="gfg_field1"
           oninput="gfg_check_duplicates()" />
    <div id="status1"></div>
    <br />
    Ph no3:
    <input id="gfg_field2"
           oninput="gfg_check_duplicates()" />
    <div id="status2"></div>
    <br />
    Ph no4:
    <input id="gfg_field3"
           oninput="gfg_check_duplicates()" />
    <div id="status3"></div>
    <br />
   
    <script>
        function gfg_check_duplicates() {
            let 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!";
                    }
                }
            }
        }
    </script>
</body>
 
</html>
HTML

输出:

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

示例2: 在这个示例中,我们将展示哪些值相同,并在我们改变输入时动态工作。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        detect the duplication 
        of values of input fields
    </title>
</head>
 
<body>
    <label>Phone no. 1</label>
    <input id="gfg_field0"
           oninput="gfg_check_duplicates()" />
    <div id="status0"></div>
    <label>Phone no. 2</label>
    <input id="gfg_field1"
           oninput="gfg_check_duplicates()" />
    <div id="status1"></div>
    <label>Phone no. 3</label>
    <input id="gfg_field2"
           oninput="gfg_check_duplicates()" />
    <div id="status2"></div>
    <label>Phone no. 4</label>
    <input id="gfg_field3"
           oninput="gfg_check_duplicates()" />
    <div id="status3"></div>
    <script>
        function gfg_check_duplicates() {
            let 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++) {
                let 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 = "";
            }
        }
    </script>
</body>
 
</html>
HTML

输出:

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

示例3: 在这个示例中,我们将使用onclick HTML事件来检查重复项。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        detect the duplication of 
        values of input fields
    </title>
</head>
 
<body>
    <label>Phone no. 1</label>
    <input id="gfg_field0" />
    <div id="status0"></div>
    <label>Phone no. 2</label>
    <input id="gfg_field1" />
    <div id="status1"></div>
    <label>Phone no. 3</label>
    <input id="gfg_field2" />
    <div id="status2"></div>
    <label>Phone no. 4</label>
    <input id="gfg_field3" />
    <div id="status3"></div>
    <br>
    <button type="submit"
            onclick="gfg_check_duplicates()">
        Check for Duplicates !
    </button>
   
    <script>
        function gfg_check_duplicates() {
            let 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++) {
                let 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 = "";
            }
        }
    </script>
</body>
</html>
HTML

输出:

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册