基本登录功能(Javascript)

Question

我一直在尝试制作一个登录函数，作为我学习Javascript的一种方式。不过，我似乎无法让它完全工作。我可以收到除"您已登录"之外的所有警报以显示。

我已经编辑了它，所以现在函数接收用户输入，但它仅适用于"哈利"，其他用户名不起作用。

https://jsfiddle.net/b12o43ay/5/

var users = ["Harry", "Julie", "Dewey", 5869];
function login() {
  var userInput = document.getElementById("userInput").value;
  if (userInput.length === 0) {
    alert('Please enter Username');
    return;
  } else {
    checkUserInput(userInput);
  }
};
function checkUserInput(userInput) {
  for (var i = 0; i < users.length; i++) {
    console.log(users[i]);
    if (users[i] === userInput) {
      alert("You are logged in");
      return;
    } else {
      alert("Invalid username, please try again or if you are new register");
      return;
    }
  }
};

<h1>Javascript Example</h1>
<input type="text" id="userInput" />
<input type="button" value="Submit" onclick="login()" />

Answer 1

首先，您需要checkUserInput函数中获取userInput。你传递它checkUserInput(userInput);但没有收到。

所以：

function checkUserInput(userInput){…

此外，您的警报并立即返回用户与数组中的第一个不匹配。而是使用indexOf，但请注意它与IE<9不兼容

function checkUserInput(userInput){
  if(users.indexOf(userInput) > -1){
    alert("You are logged in");
    return;
  }
  else{
    alert("Invalid username, please try again or if you are new register");
    return;           
  }                
};

indexOf 是检查数组中是否存在元素的更好方法。

Answer 2

您需要更新添加输入参数">userInput"以检查用户输入方法。当你在jsfiddle代码的第15行传递checkUserInput(userInput(时。

        function checkUserInput(userInput){
            for(var i = 0; i < users.length; i++){
            console.log(users[i]);
              if (users[i] === userInput){
              alert("You are logged in");
              return;
              }
            else{
              alert("Invalid username, please try again or if you are new register");
              return;           
            }
          }};

Answer 3

首先，切勿使用客户端JavaScript来实现任何类型的登录功能，因为它充满了安全问题。也就是说，您可以做几件事来改进代码。

.HTML：

<form>
  <input type="text" id="userInput" />
  <input type="submit" value="Submit" />
</form>

为此使用表单并删除内联事件侦听器。

.JS：

function login(e) {
  e.preventDefault();
  var input = userInput.value;
  if (input === '') {
    alert('Please enter Username');
    return;
  }
  checkUserInput(input);
}
function checkUserInput(name) {
  if (users.includes(name)){
    alert("You are logged in");
  } else {
    alert("Invalid username, please try again or if you are new register");
  }
}
var form = document.forms[0];
var userInput = document.getElementById("userInput");
var users = ["Harry", "Julie", "Dewey", "5869"];
form.addEventListener('submit', login);

使用 addEventListener 附加侦听器。将调用移出函数getElementById以避免重复查询 DOM。

在 login 函数中，您可能会丢失 if 语句的else部分。在checkUserInput中，您可以使用新的include方法来检查名称是否包含在数组中，尽管浏览器对此的支持不是很好(如果这是一个学习练习，希望无关紧要(。

如您所见，我将用户在文本字段中输入的值传递给调用checkUserInput。这是您发布的代码不起作用的主要原因。

呵

呵。