检查用户名是否已经存在，没有 ajax 或 php，只是纯 js

Question

这是代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"> 
        function submit() 
        {
            var ul = document.getElementById("names");
            var name = document.getElementById("name").value;

            var i = 0, flag = 0;
            var allNames = [];
            if (allNames.length == 0) 
            {
                allNames[0] = name;
            }
            else 
            {
                if (allNames.includes(name))
                {
                    alert("Name already exists.");
                    return -1;
                }
                else 
                {
                    allNames[i++] = name;
                }
            }
            var li = document.createElement("li");
            li.innerHTML = name;

            ul.appendChild(li);
            document.getElementById("name").value = "";
        }
    </script>
</head>
<body>
    <input type="text" id="name">
    <button onclick="submit()">Submit</button>
    <div>
        <h2>Usernames</h2>
        <ul id="names"></ul>
    </div>
</body>
</html>

有没有办法检查用户名是否已经存在并因此阻止新条目，仅使用 javascript？

我也尝试过将数组的初始化移到 function 之外，但它也不起作用......

Answer 1

是的，只需在 function 之外声明allNames变量。 您当前每次调用提交 function 时都会使用空数组创建它。

您还有一个问题，因为您的i每次都设置为 0。 如果不包含它，只需使用.push （而不是尝试指定索引）。

 var allNames = []; function submit() { var ul = document.getElementById("names"); var name = document.getElementById("name").value; if (allNames.includes(name)) { alert("Name already exists."); return -1; } else { allNames.push(name); } var li = document.createElement("li"); li.innerHTML = name; ul.appendChild(li); document.getElementById("name").value = ""; }

 <input type="text" id="name"> <button onclick="submit()">Submit</button> <div> <h2>Usernames</h2> <ul id="names"></ul> </div>

检查用户名是否已经存在，没有 ajax 或 php，只是纯 js

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-12 15:10:25

检查用户名是否已经存在，没有 ajax 或 php，只是纯 js

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-12 15:10:25

解决方案1
2 已采纳 2020-06-12 15:10:25