表单提交验证通过后页面跳转失效问题求助

我尝试实现用户填写表单通过验证后跳转到其他页面，用了location.href = "otherpage.html";和location.replace("otherpage.html")两种方式，加上window.前缀依然无效。以下是我的原始代码：

原始HTML代码 #

<!DOCTYPE html>
<head>
    <script src="javascript/srcipt.js"></script>
</head>
<html>
    <form name="form" onsubmit="Distance();" method="POST">
        <p>
            <label for="dLondon">Distance from London</label>
            <input type="number" id="dLondon" name="dLondon" min="0" required>
            <label for="dLondon">miles</label>
        </p>
        <p>
            <label for="dCanberra">Distance from Canberra</label>
            <input type="number" id="dCanberra" name="dCanberra" min="0" required>
            <label for="dCanberra">miles</label>
        </p>        
        <p>
            <label for="dOttawa">Distance from Ottawa</label>
            <input type="number" id="dOttawa" name="dOttawa" min="0" required>
            <label for="dOttawa">miles</label>
        </p>
        <input type="submit" value="Submit">
    </form>
</html>

原始JavaScript代码 #

function Distance() {
    let dLondon = document.forms["form"]["dLondon"].value;
    let dOttawa = document.forms["form"]["dOttawa"].value;
    let dCanberra = document.forms["form"]["dCanberra"].value;
    if ((3900 <= dLondon) && ( dLondon <= 5200)) {
        if ((5500 <= dCanberra) && (dCanberra <= 6700)) {
            if ((6700 <= dOttawa) && (dOttawa <= 9300)) {
                location.href = "otherpage.html";
            }
            else {
                alert("Ottawa Distance isn't correct !");
            }
        }
        else {
            alert("Canberra distance isn't correct !");
        }
    }
    else {
alert("London Distance isn't correct ! ");
}
}

问题原因及解决步骤 #

1. 表单默认提交行为未阻止：点击提交按钮后，表单会触发默认POST提交并刷新页面，跳转代码执行后会被覆盖。需要在onsubmit事件中返回验证函数结果，同时在验证通过时返回false阻止默认行为。
2. 输入值类型不匹配：输入框的value是字符串类型，直接和数字比较可能出现逻辑错误，需转换为数字类型再判断。
3. 脚本路径拼写错误：HTML中引用的srcipt.js是拼写错误，改为script.js才能正确加载脚本。
4. HTML结构不规范：<head>标签应放在<html>内部，且需要<body>标签包裹页面内容，否则可能导致浏览器渲染异常。

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <script src="javascript/script.js"></script>
</head>
<body>
    <form name="form" onsubmit="return Distance();" method="POST">
        <p>
            <label for="dLondon">Distance from London</label>
            <input type="number" id="dLondon" name="dLondon" min="0" required>
            <label for="dLondon">miles</label>
        </p>
        <p>
            <label for="dCanberra">Distance from Canberra</label>
            <input type="number" id="dCanberra" name="dCanberra" min="0" required>
            <label for="dCanberra">miles</label>
        </p>        
        <p>
            <label for="dOttawa">Distance from Ottawa</label>
            <input type="number" id="dOttawa" name="dOttawa" min="0" required>
            <label for="dOttawa">miles</label>
        </p>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

JavaScript代码

function Distance() {
    // 将输入值转为数字类型
    let dLondon = Number(document.forms["form"]["dLondon"].value);
    let dOttawa = Number(document.forms["form"]["dOttawa"].value);
    let dCanberra = Number(document.forms["form"]["dCanberra"].value);
    
    if ((3900 <= dLondon) && (dLondon <= 5200)) {
        if ((5500 <= dCanberra) && (dCanberra <= 6700)) {
            if ((6700 <= dOttawa) && (dOttawa <= 9300)) {
                window.location.href = "otherpage.html";
                // 阻止表单默认提交
                return false;
            } else {
                alert("Ottawa Distance isn't correct !");
            }
        } else {
            alert("Canberra distance isn't correct !");
        }
    } else {
        alert("London Distance isn't correct ! ");
    }
    // 验证不通过时同样阻止默认提交
    return false;
}

内容的提问来源于stack exchange，提问作者KeeTl