表单验证通过后如何跳转到已创建的另一页面？

核心问题分析 #

1. 变量获取时机错误：页面加载时就获取了输入框的值，此时输入框为空，后续用户输入内容后，username和pass变量不会自动更新，导致验证逻辑始终基于初始空值判断，永远无法满足跳转条件。
2. 跳转路径不合理：使用本地绝对路径，文件位置变动时会失效，同一文件夹下应使用相对路径。
3. 函数名冲突风险：submit是表单元素的内置方法，自定义同名函数可能引发冲突。

修复后的代码 #

Script.js

function loginSubmit() {
  // 每次提交时获取最新的输入值
  var username = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;

  if (username.length > 0 && pass.length > 0) {
    if (username === "Abi" && pass.length === 5) {
      // 跳转当前窗口（需打开新窗口可改用window.open("index1.html")）
      window.location.href = "index1.html";
      return true;
    }
  }
  return false;
}

index.html

修改表单的onsubmit属性，替换为新的函数名：

<form name="login" onsubmit="return loginSubmit()" method="get">
  <!-- 其余内容保持不变 -->
</form>

额外说明 #

• 表单自带的required属性会在提交前检查输入框非空，你可以选择保留自定义长度判断，或直接依赖原生验证简化逻辑。

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