Question

<form id="loginForm"> 
    <p id="usernameLabel">Username:</p>
    <input type="text" name="username" id="username" placeholder="username"/><br>
    <p id="passwordLabel">Password: </p>
    <input type="password" name="password" id="password" placeholder="password"/><br>
    <input id="loginButton" type="submit" value="Login!" onsubmit="validateForm()">
</form>
<p id="loginMessage">Please Login!</p>

<script type="text/javascript">
    function validateForm() {
        var un = document.loginForm.username.value;
        var pw = document.loginForm.password.value;
        var username = "MitchWardle"; 
        var password = "123abc456";
        if ((un == username) && (pw == password)) {
            window.location = "content.html";
            return false;
        }
        else {
            alert ("Login was unsuccessful, please check your username and password");
        }
    }
</script>

我在Javascript上创建了一个小的登录表单，我希望它在用户名和密码正确时导航到Content.html但是当我点击我的“登录”按钮时，它只是从文本框中删除了文本，可以谁看到什么错了？

Answer 1

这样做：

从按钮中删除onsubmit，将其添加到表单中。
将表单的id更改为name。
在表单<{>>附加<{strong> onsubmit的{{1}}内。
从if语句中删除return false;。
将return false;行更改为：
```
document.loginForm
```

希望它有效。

Answer 2

您需要返回false以防止提交表单的默认操作，页面刷新并丢失您的数据，您可以设置提交按钮的类型

  type="button"

或者可以更改提交

onclick="validateForm(); return false; "

Answer 3

只有几件事情已经结束，但它几乎就在那里：

onsubmit处理程序用于表单级别。将onsubmit移至<form>元素，或将其更改为onclick元素的<input>事件。
为了按照您的方式引用文本字段，<form>元素还需要name属性。即name="loginForm"

Answer 4

我遇到了和以前一样的问题，我通过将提交按钮更改为<input type="button" onclick="login();" />来解决问题，一切正常。但是，用户无法使用回车键提交表单（因为表单中没有提交按钮）。

简单的Javascript登录表单

4 个答案: