在匹配时删除登录页面中的错误消息

问题描述 投票:0回答:1

我有一个登录页面,我有用于匹配密码的API。如果密码不匹配,它将显示错误消息但我的问题是如果密码匹配也显示错误消息。因为我循环数据所以每次检查时我都需要打破循环,如果它匹配的方法。这是我的code

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);
            }
        });

    });
});
javascript jquery html bootstrap-4
1个回答
0
投票

当密码匹配时,我已经分叉并破坏了你的代码。你可以从这里测试一下:code

$(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-catchthrow异常中添加代码。这就是我在上面的代码中所做的。

© www.soinside.com 2019 - 2024. All rights reserved.