Question

我正尝试使用重定向到另一个html页面

window.confirm('Login was successful')
        {
window.location.href="logintest.html";
};

，但是它不起作用。这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Instructor Login Form</title>
   
    <script>
    function validate() {
        var un = document.getElementById("username").value;
        var pw = document.getElementById("password").value;
        var valid = false;
        var unArray = ["admin", "David", "Paul"];
        var pwArray = ["123456789", "111", "911"];
        for (var i = 0; i < unArray.length; i++) {
            if ((un == unArray[i]) && (pw == pwArray[i])) {
                valid = true;
                break;
            }
        }
        if (valid) {
        window.confirm('Login was successful')
        {
window.location.href="logintest.html";
};

            return false;
        }
         if (!valid) {
         window.confirm('Login failed')
        {
window.location.href="test.html";
};

            return false;
        }
    }
    </script>
</head>

<body>
<form action = "{{ request.path }}" method = "POST" >
<div class="p1">
<p> Saudi Electronic University</p> </div>

<div class="container1">

<h1>Instructor Login </h1>
    <input type="text" placeholder="Enter Username" name="username" id="username" >
      <br>
    <input type="password" placeholder="Enter Password" name="password" id="password">
<br>

   <button class="button" id="submit" onclick="validate()" >Submit</button>

</div>
</form>
</body>
</html>

这是函数，也许我需要在这里进行一些验证，但我不知道：

@app.route('/test', methods=['GET', 'POST'])
def test():
    return render_template("test.html")

Answer 1

您的代码中存在一些括号问题。试试这个：

if (valid) {
        window.alert('Login was successful');
        window.location.href="logintest.html";
}
else 
{
        window.alert('Login failed');
        window.location.href="test.html";
}
return false;

Answer 2

这是完整的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Instructor Login Form</title>
   
</head>

<body>
    <form id='form'>
        <div class="p1"><p> Saudi Electronic University</p> </div>
        <div class="container1">
            <h1>Instructor Login </h1>
            <input type="text" placeholder="Enter Username" name="username" id="username" >
            <br>
            <input type="password" placeholder="Enter Password" name="password" id="password">
            <br>
            <button type='submit'>Submit</button>
        </div>
    </form>
    <script>
        function validate(event) {
            var un = document.getElementById("username").value;
            var pw = document.getElementById("password").value;
            var valid = false;
            var unArray = ["admin", "David", "Paul"];
            var pwArray = ["123456789", "111", "911"];
            for (var i = 0; i < unArray.length; i++) {
                if ((un == unArray[i]) && (pw == pwArray[i])) {
                    return true;
                }
            }
            return false;
        }
        const form = document.getElementById('form');
        form.addEventListener('submit', event => {
            event.preventDefault();
            if( validate() ) {
                window.location.href = 'https://www.google.com';
            } else {
                alert('Bad credentials');
            }
        });
    </script>
</body>
</html>

Answer 3

尝试这样的事情：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>Instructor Login Form</title>


    <script>
        function validate() {

            console.log("Validate clicked")

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

            var valid = false;

            var unArray = ["admin", "David", "Paul"];
            var pwArray = ["123456789", "111", "911", "admin"];

            if (unArray.includes(un) && pwArray.includes(pw)) {
                valid = true;
            }

            console.log(valid)

            if (valid) {

                if (window.confirm('Login was successful')) {
                    window.location.href = "logintest.html";
                };

                return false;

            } else {

                if (window.confirm('Login failed')) {
                    window.location.href = "test.html";
                };

                return false;
            }

        }

    </script>

</head>

<body>

    <form action="javascript:void(0)" method="POST">
        <div class="p1">
            <p> Saudi Electronic University</p>
        </div>

        <div class="container1">

            <h1>Instructor Login </h1>
            <input type="text" placeholder="Enter Username" name="username" id="username">
            <br>
            <input type="password" placeholder="Enter Password" name="password" id="password">
            <br>

            <button class="button" onclick="validate();">Submit</button>

        </div>
    </form>
</body>

</html>

您必须测试是否

window.confirm('Login failed')

交火了。

使用脚本标签重定向到另一个HTML页面

3 个答案: