Question

我在登录功能中添加了一个断点。当我提交表单时，应该调用login函数;但它没有被召唤。当我登录时，页面不会重定向到window.location。如果登录凭据与本地存储中的登录凭据相同，我希望重定向页面。我知道我们不应该验证您的代码客户端。但就目前而言，让我们忽略它。

＆＃13;

 var db = window.localStorage;

    function signUp() {
        var signupFormDt = document.querySelector('#signup-form');
        var email = signupFormDt.querySelector('input[name="email"]');
        var password = signupFormDt.querySelector('input[name="password"]');
        var userName = signupFormDt.querySelector('input[name="name"]');

        db.setItem(userName.name, userName.value);
        db.setItem(email.name, email.value);
        db.setItem(password.name, password.value);
    }

    function login() {
        var loginFormDt = document.querySelector('#login-form');
        var logEmail = loginFormDt.querySelector('input[type="email"]');
        var logPass = loginFormDt.querySelector('input[type="password"]');
        if (db.email == logEmail.value && db.password == logPass.value) {
            window.location = 'http://www.google.com';
        } else {
            window.location = "http://www.google.com";
        }

    }

＆＃13;

 <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--Link to StyleSheet-->
        <link rel="stylesheet" href="../css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="container">
                <h1>
                    <a href="#"></a>
                </h1>
                <nav>
                    <ul class="clearfix">
                        <li>
                            <a href="#">
                                <h4>Home</h4>
                            </a>
                        </li>
                        <li>
                            <a href="../html/about.html">
                                <h4>About</h4>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h4>Contact</h4>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h4 id="social">Social</h4>
                                <div class="arrow"></div>
                                <ul>
                                    <li>Twitter</li>
                                    <li>Facebook</li>
                                    <li>Instagram</li>
                                    <li>Snapchat</li>
                                    <li>Tumblr</li>
                                </ul>
                            </a>
                        </li>
                    </ul>
                    <!-- end of ul of main nav-->
                </nav>
                <!--end of nav-->
            </div>
            <!--end of container-->
        </header>
        <main>
            <section>
                <h3>login Page</h3>
                <div id="login">
                    <p><a href="../html/index.html" title="link to home page">Myselfie Tech</a></p>
                    <form method="Post" id="login-form">
                        <p>
                            <input type="email" name="email" id="email" placeholder="email" required>
                        </p>
                        <p>
                            <input type="password" name="password" id="password" placeholder="password" required>
                        </p>
                        <p>
                            <button type="submit" onsubmit="login()">Submit Query</button>
                        </p>
                        <p>
                            <button onclick="window.location='../html/index.html'">Back</button>
                        </p>
                    </form>
                </div>
            </section>
        </main>
        <footer>
            <p>
                <center><small>©Copyright 2017 programmers inc.</small></center>
            </p>
        </footer>
        <!--Link to Javascript-->
        <script src="../javascript/scripts1.js"></script>
    </body>

    </html>

＆＃13;

Answer 1

button元素没有onsubmit属性。您应该将该属性放在form标记上以使其生效。另外，请确保取消表单提交，因为您希望使用window.location以不同的方式控制导航：

添加return：
```
<form onsubmit="return login();">
```

在return false之后添加.href和location：

function login() {
    var loginFormDt = document.querySelector('#login-form');
    var logEmail = loginFormDt.querySelector('input[type="email"]');
    var logPass = loginFormDt.querySelector('input[type="password"]');
    if (db.email == logEmail.value && db.password == logPass.value) {
        window.location.href = 'http://www.google.com';
    } else {
        window.location.href = "http://www.google.com";
    }
    return false; // <------
}

Answer 2

尝试使用输入标记代替按钮进行提交

类似

<input id="clickMe" type="button" value="Submit Query" onclick="login()" />

为什么代码中的登录功能没有被调用？

2 个答案: