javascript - 取消表单提交后 window.location.href 仍然无法工作

Question

我有一个登录表单

<div id='login_form'>
        <table>
            <tr>
                <td>Username:</td>
                <td><input size=25 type='text' id='username'></td>  
            </tr>
            <tr>
                <td>Password:</td>
                <td><input size=25 type='password' id='password'></td>
            </tr>
            <tr>
                <td colspan='2' align='right'>
                      <input type='button' id='login' value='Login' onkeydown='normalobjKeyFunc(this)' onfocus='itemFocus(this)'                                                  onblur='itemBlur(this)'/>
                </td>
            </tr>
        </table>
</div>

然后我有javaScript

var input_username = document.getElementById("username").value;
var input_password = document.getElementById("password").value;

if(input_username === "123" && input_password === "456"){
    alert("Correct username & password");
    window.location.href="../../result.html";
    return false;
}

但是当我收到“正确的用户名和密码”警报时，页面没有重定向到 result.html。我检查了“../../result.html”存在。

1. 我发现有些人说应该取消提交，所以我删除了表单并将登录按钮的“type =”submit“”更改为“type =”button“”，但它不起作用。
2. 还有另一种方法，在“window.location.href="../../result.html"”后面添加“return false”，但效果不佳。

有人有什么想法吗？？？提前致谢!

Answer 1

用户名/密码检查应在后端(Java、PHP、Node、.NET)上完成

不过，您的表单应该位于表单标记中。检查应该在 onsubmit 回调中完成:

<script>
    function authenticate(){
        var input_username = document.getElementById("username").value;
        var input_password = document.getElementById("password").value;

        if(input_username==="123"&&input_password==="456"){
            alert("Correct username & password");
            window.location.href = "../../result.html";
        }
        else {
            // Error
        }
        return false;
    }
</script>
<form onsubmit="authenticate()">
    <table>
        <tr>
            <td>Username:</td>
            <td><input size="25" type="text" id="username"></td>  
        </tr>
        <tr>
            <td>Password:</td>
            <td><input size="25" type="password" id="password"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: right">
                <button onkeydown="normalobjKeyFunc(this)" onfocus="itemFocus(this)" onblur="itemBlur(this)">Login</button>
            </td>
        </tr>
    </table>
</form>