if/else 在 Javascript 登录页面中不工作

Question

我用 HTML、CSS 和 JS 创建了一个登录页面。如果 <input> 中的值正确，js 代码会使用代码 window.location.replace("href") 将我带到我想要的位置，如果值不正确，它会显示警报。但我想要一个代码，这样如果输入为空，它会显示另一个警报而不是前一个。我还在 html <input> 标签中使用了必填字段：<input type="password" id="password" class="input" required>，但是通过使用必填，整个代码不起作用。代码是：

Javascript

function auth(event) {
      event.preventDefault();

      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      if (username === "admin@gmail.com" && password === "user") {
           window.location.replace("http://www.rex14.ml/");
      } else {
          alert("Please enter valid information");
          return;
      }
}

我已经试过了，但没有用： `

    function auth(event) {
          event.preventDefault();

          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;

          if (username === "admin@gmail.com" && password === "user") {
               window.location.replace("http://www.rex14.ml/");
          } else {
              alert("Please enter valid information");
              return;
          }
 if (username === "" && password === "") {
               alert("Please enter information");
          } else {
              
              return;
          }
    }

`

Answer 1

问题出在你的if/else structure.By using required in form，你的表单没有提交，你的函数也没有被调用，你的函数只会在提交表单时被调用，required在填写字段之前不允许提交表单。 html 文件是：

<body>
  <form id="form">
      <input type="text" placeholder="username" id="username">
      <input type="text" placeholder="password" id="password">
      <button type="submit">Submit</button>
  </form>
  

  <script src="index.js"></script>
</body>

和javascript文件将是：

document.getElementById("form").addEventListener("submit", auth);

function auth(event) {
     event.preventDefault();

     var username = document.getElementById("username").value;
     var password = document.getElementById("password").value;
     console.log(username);

     if (username === "admin@gmail.com" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
     }  if (username === "" && password === "") {
          alert("Please enter information");
     } else{
         alert("Please enter valid information");
         return;
     }
}

如需现场演示，请访问我的 codepen

Answer 2

最重要的，你应该使用“else if”。否则你的第三个条件将永远不会被考虑。一个简单的解决方案是这样的：

function auth(event) {
     event.preventDefault();
     if (username === "admin@gmail.com" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
     } else if (username === "" && password === "") {
          alert("Please enter information");
          return;
     } else {
         alert("Please enter valid information");
         return;
     }
}

您也可以通过这种方式删除任何“else”语句：

function auth(event) {
     event.preventDefault();
     if (username === "admin@gmail.com" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
          return;
     }
     if (username === "" && password === "") {
          alert("Please enter information");
          return;
     }
     alert("Please enter valid information");
     return;
}

其次，如果您在表单中有一个“必填”输入，而您将其留空，则不会提交。如果您的输入不在表单内，请添加事件处理程序。如果它在表单内，请删除“必填”字段，因为您已经在处理 auth 函数内的空输入问题。

Answer 3

我能看到的原因是 if-else 和 if 语句的顺序。 if-else 之后的 if 语句无法访问，这就是它不显示您添加的新警报的原因。

尝试使用以下代码：

function auth(event) {
          event.preventDefault();

          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;

          if (username === "admin@gmail.com" && password === "user") 
         {
               window.location.replace("http://www.rex14.ml/");
          } else if (username === "" && password === "") {
               alert("Please enter information");
          } else {
              alert("Please enter valid information");
              return;
          }
    }

Answer 4

只需添加验证以检查字段是否为空：

if (username.length === 0 || password.length === 0) {
  alert("Username and password must be filled!");
  return;
}

所以你的方法看起来像：

function auth(event) {
  event.preventDefault();

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // check if the username of password are empty
  if (username.length === 0 || password.length === 0) {
    alert("Username and password must be filled!");
    return false;
  }

  if (username === "admin@gmail.com" && password === "user") {
    window.location.replace("http://www.rex14.ml/");
  } else {
    alert("Please enter valid information");
    return;
  }
}

关于你的第二个片段，你不能像 if / else / else 那样做 2 个 else，使用单个 if 块的正确方法是使用一个简单的 if / else if / else 像这样：

function auth(event) {
  event.preventDefault();

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username.length === 0 || password.length === 0) {
    alert("Username and password must be filled!");
    return;
  } else if (username === "admin@gmail.com" && password === "user") {
    window.location.replace("http://www.rex14.ml/");
  } else {
    alert("Please enter valid information");
    return;
  }
}

注意：Javascript代码可以通过检查页面代码看到，所以像你这样在 js 文件中存储用户名和密码是非常不安全的，任何人都可以检查代码看看应该使用什么用户名和密码。

Answer 5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form" onsubmit="return auth(this)">
      <input type="text" placeholder="username" id="username" />
      <input type="text" placeholder="password" id="password" />
      <button type="submit">Submit</button>
    </form>
  </body>
  <script>
    function auth(event) {
      var username = event.username.value;
      var password = event.password.value;

      if (username === "admin@gmail.com" && password === "user") {
        window.location.replace("http://www.rex14.ml/");
      } else {
        alert("Please enter valid information");
        return false;
      }
      return false;
    }
  </script>
</html>

if/else 在 Javascript 登录页面中不工作

if/else not working in Javascript Login Page

javascript

html

if-statement

authentication

login-script