表单验证后条件式页面跳转：JavaScript与HTML表单的协同

<form id="form" action="submit.php" target="_blank" method="post" >
  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input id="usrname" type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input id="passwrd" type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" onClick="validateForm()">Login</button>
  </div>
</form>

<script>
  function validateForm() {
    var un = document.querySelector('#usrname').value;
    var pw = document.querySelector('#passwrd').value;
    var username = "admin";
    var password = "pass";

    if ((un == username) && (pw == password)) {
      alert('You are successfully logged in');
      location.replace("https://google.com"); // 原始的导航尝试
    } else {
      alert("Login was unsuccessful, please check your username and password");
      return false;
    }
  }
</script>

<form id="form" action="submit.php" target="_blank" method="post" >
  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input id="usrname" type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input id="passwrd" type="password" placeholder="Enter Password" name="psw" required>

    <!-- 修改：传递事件对象给validateForm函数 -->
    <button type="submit" onClick="validateForm(event)">Login</button>
  </div>
</form>

<script>
  function validateForm(event) { // 接收事件对象
    // 阻止表单的默认提交行为
    event.preventDefault(); 

    var un = document.querySelector('#usrname').value;
    var pw = document.querySelector('#passwrd').value;
    var username = "admin";
    var password = "pass";

    if ((un == username) && (pw == password)) {
      alert('您已成功登录！');
      // 使用 window.location.href 进行页面跳转
      window.location.href = "https://google.com";
    } else {
      alert("登录失败，请检查您的用户名和密码。");
      // 验证失败时，无需额外操作，因为默认提交已被阻止
    }
  }
</script>

<!-- 移除按钮上的 onClick 事件 -->
<form id="form" action="submit.php" target="_blank" method="post" onsubmit="return validateForm(event)">
  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input id="usrname" type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input id="passwrd" type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button> <!-- 按钮只需触发提交 -->
  </div>
</form>

<script>
  function validateForm(event) {
    var un = document.querySelector('#usrname').value;
    var pw = document.querySelector('#passwrd').value;
    var username = "admin";
    var password = "pass";

    if ((un == username) && (pw == password)) {
      alert('您已成功登录！');
      window.location.href = "https://google.com";
      return false; // 成功导航后，阻止表单继续提交
    } else {
      alert("登录失败，请检查您的用户名和密码。");
      return false; // 验证失败时，阻止表单提交
    }
  }
</script>