javascript - 我的功能只工作一次

Question

我的功能有问题。我想通过 JSON 数据进行登录表单验证。我的代码工作正常，但只有当我在刷新后立即输入正确的数据时。例如，当我输入不正确的登录名/密码时，我会收到错误消息，但之后当我输入正确的登录名/密码时，什么也没有发生。

如果您能提供帮助，我将不胜感激。这是我的 js 代码:

//JSON validation
function validation(username, password){
    var alert = document.getElementById("invalid-data");
    data = JSON.parse(data);

    for (var i=0; i < data.length; i++) {
        if (username == data[i].login && password == data[i].password) {
            window.open("panel.html", "_self");
        } else {
            alert.style.display = "block";
        }
    }
}

//Form validation
function getLoginInfo() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    validation(username, password);
}

var button = document.getElementById("login-button");
button.addEventListener("click", getLoginInfo);

Answer 1

我希望你的问题是 data = JSON.parse(data); 因为当你第一次得到解析数据时，你又将它放入 data 中，这会导致问题你的下一个 data json 解析。所以我认为如果您将解析后的 data 放入不同的变量中，例如下面的代码，您的问题就会得到解决:

//JSON validation
function validation(username, password){
var alert = document.getElementById("invalid-data");
var parsed_data = JSON.parse(data);

for (var i=0; i < parsed_data.length; i++) {
    if (username == parsed_data[i].login && password == parsed_data[i].password) {
        window.open("panel.html", "_self");
    } else {
        alert.style.display = "block";
    }
}
}
//Form validation
function getLoginInfo() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

validation(username, password);
}

var button = document.getElementById("login-button");
button.addEventListener("click", getLoginInfo);