为什么JavaScript中的for循环只捕获第一个索引[关闭]

wnavrhmk  于 2023-05-27  发布在  Java
关注(0)|答案(2)|浏览(239)

已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

昨天关门了。
Improve this question
我试图检查用户名字段和密码字段是否与此api中的字段匹配,每当用户名等于admin,密码等于Manastir 1600时-我在控制台中看到消息:“成功!”
当我尝试输入用户名admin和密码时:value 2我在控制台中看到消息:“用户名或密码无效!“
我的HTML表单是:

<div class="container">
          <label for="uname"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
      
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
      
          <button type="submit" onclick="login()">Login</button>
          <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
        </div>

我的JS文件是:

async function login() {
   //Get value from username and password
   const username = document.getElementById('uname');
   const password = document.getElementById('psw');
   //Fetching data
   const response = await fetch("http://194.141.118.43:3030/users");
   const jsonData = await response.json();

   //Check for database username and database
   for (const item of jsonData.users) {
      if (username.value == "" || password.value == ""){
         return alert("Username or password cannot be empty!");
      }
      if (username.value == item.user && password.value == item.password) {
          return console.log("Sucsess!")
         }else{
           return alert("Invalid username or password!");
         }
     }
 }

我想这样做,当一个人在用户名和密码字段中输入一些东西时,它们会与来自API服务器的字段进行比较。

3qpi33ja

3qpi33ja1#

这个 * 总是在 first 元素上返回 *:

for (const item of jsonData.users) {
  if (username.value == "" || password.value == ""){
    return alert("Username or password cannot be empty!");
  }
  if (username.value == item.user && password.value == item.password) {
    // returns if the login was successful
    return console.log("Sucsess!")
  }else{
    // returns if the login was not successful
    return alert("Invalid username or password!");
  }
  // either way, we've already returned
}

它也没有返回任何有用的东西,只有undefined。但这是一个单独的潜在问题。
如果你想遍历 * 所有 * 记录,不要 * 返回 *。相反,跟踪比较的持续状态,并在最后返回结果。例如:

let loginSuccess = false;

for (const item of jsonData.users) {
  if (username.value == "" || password.value == ""){
    alert("Username or password cannot be empty!");
    return;
  }
  if (username.value == item.user && password.value == item.password) {
    loginSuccess = true;
    break;
  }
}

if (loginSuccess) {
  alert("Success!");
} else {
  alert("Invalid username or password!");
}

在本例中,我们使用变量loginSuccess来跟踪我们是否在记录中的任何地方看到了成功登录。一旦我们找到一个,我们就从循环中将该值更新为truebreak。然后在循环结束后,检查该值并产生相应的结果。

**重要提示:**后退一步...以所有神圣的事物的名义,这个代码 * 甚至在做什么?

  • 检查用户名/密码 * 客户端 * 实际上是毫无意义的。用户可以 * 看到值 *,并且可以随时 * 跳过验证 *。
  • 用户密码应该 * 永远 * 是这样的纯文本。
  • 这个返回用户名和密码列表的可公开访问的API是什么?如果用户无论如何都可以 * 看到所有的密码 *,那么检查这个有什么意义呢?

一方面,我真诚地希望这只不过是一个学术练习,而不是实际的生产功能。另一方面,这绝对不应该是一个学术练习,因为它教的是可怕的东西。
总之...即使在纠正了逻辑之后,无论你在做什么,你都应该绝对不要做。如果这个功能是你的主意,那就放弃它吧。如果这是别人的主意,不要再听那个人的。

dced5bon

dced5bon2#

在您使用的程序中,当用户被跟踪时,如果第一个数据不是所需的数据,则警报将暂停程序运行,因此为了缓解此问题,我们可以设置一个标志,该标志在找到数据时打开,当循环终止且未找到数据时,则仅使用警报,这允许程序在使用警报之前完全运行。

async function login() {
                    //Get value from username and password
                    const username = document.getElementById('uname');
                    const password = document.getElementById('psw');
                    //Fetching data
                    const response = await fetch("http://194.141.118.43:3030/users");
                    const jsonData = await response.json();
                    let flag=0;
                    //Check for database username and database
                    for (const item of jsonData.users) {
                        if (username.value == "" || password.value == "") {
                            flag=1;
                            return alert("Username or password cannot be empty!");
                        }
                        if (username.value == item.user && password.value == item.password) {
                            flag=1;
                            return console.log("Sucsess!")
                        } 
                        }
                if (flag === 0) {
                    alert("credential not matched")
                }
                flag = 0
                    }

相关问题