Удалить сообщение об ошибке на странице входа, когда оно совпадает

Question

У меня есть страница входа и у меня есть API для сопоставления пароля.Если пароль не совпадает, он покажет сообщение об ошибке, но моя проблема в том, что если пароль совпадает, также отображается сообщение об ошибке.потому что я зацикливаю данные, поэтому каждый раз, когда он проверяет, мне нужно разорвать цикл, если он соответствует, как это сделать.Вот мой код

HTML

$(document).ready(function() {
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function(e) {
        e.preventDefault();
        var form_data = $('#login').serialize();
        var username = $("#name").val();
        var pwd = $("#password").val();
        $.ajax({
            url: "https://api.myjson.com/bins/qt7fk",
            type: "GET",
            dataType: "json",

            success: function(data) {
                console.log(typeof(data));
                // alert(JSON.stringify(data));
                var arr = data;
                arr.forEach(function(obj) {
                    console.log('name: ' + obj.name);
                    console.log('password: ' + obj.role);
                    var pass = obj.password;
                    // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                    var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
                    var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                    // alert(plaintext);
                    var role = obj.role;
                    if (role == "User") {
                        if (username == obj.name && pwd == plaintext) {
                            alert("New role");
                            document.getElementById('message').innerHTML = "Success"
                            /*   window.location.href = "./job-insert.html?role=" + role; */
                        } else {
                            $("#login p").removeClass("d-none");
                        }
                    } else {
                        if (username == obj.name && pwd == plaintext) {
                            alert("Login succes");
                            document.getElementById('message').innerHTML = "Success"

                            /* window.location.href = "./dashboard.html?role=" + role; */
                        } else {
                            $("#login p").removeClass("d-none");
                            document.getElementById('message').innerHTML = "Please enter a correct login and password"
                        }
                    }
                })
            },
            error: function(data) {
                console.log(data);
            }
        });

    });
});

Answer 1

Я разбудил и сломал ваш код, когда пароль совпадает.Вы можете проверить это здесь: код

$(document).ready(function() {
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function(e) {
        e.preventDefault();
        var form_data = $('#login').serialize();
        var username = $("#name").val();
        var pwd = $("#password").val();
        $.ajax({
            url: "https://api.myjson.com/bins/qt7fk",
            type: "GET",
            dataType: "json",

            success: function(data) {
                console.log(typeof(data));
                // alert(JSON.stringify(data));
                var arr = data;
                var BreakException = {};
                try {
                    arr.forEach(function(obj) {
                        console.log('name: ' + obj.name);
                        console.log('password: ' + obj.role);
                        var pass = obj.password;
                        // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                        var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
                        var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                        // alert(plaintext);
                        var role = obj.role;
                        if (role == "User") {
                            if (username == obj.name && pwd == plaintext) {
                                alert("New role");
                                document.getElementById('message').innerHTML = "Success"
                                /*   window.location.href = "./job-insert.html?role=" + role; */
                            } else {
                                $("#login p").removeClass("d-none");
                            }
                        } else {
                            if (username == obj.name && pwd == plaintext) {
                                alert("Login succes");
                                document.getElementById('message').innerHTML = "Success"
                                throw BreakException;

                                /* window.location.href = "./dashboard.html?role=" + role; */
                            } else {
                                $("#login p").removeClass("d-none");
                                document.getElementById('message').innerHTML = "Please enter a correct login and password"
                            }
                        }
                    })
                } catch (e) {
                    if (e !== BreakException) throw e;
                }
            },
            error: function(data) {
                console.log(data);
            }
        });

    });
});

ПРИМЕЧАНИЕ: Вы можете разбить forEach, как и другие циклы.Чтобы сделать это, вам нужно добавить свой код в исключениях try-catch и throw, когда пароль совпадает.Это то, что я сделал в приведенном выше коде.