提问者:小点点

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


下面是代码:

<!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?

我也试过将数组的初始化移到函数之外,但也不是这样。。。


共1个答案

匿名用户

是的,只需在函数外部声明allnames变量即可。 当前,每次调用submit函数时,您都用一个空数组创建它。

您还有一个问题,因为您的i每次都被设置为0。

只要使用.push,如果没有包含它。

null

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>