HTML表单使用submit类型按钮时IF条件判断逻辑不生效

两个异常的本质都是事件绑定和表单默认行为没处理对：

• 按钮设置type="button"时，按钮本身不具备触发表单提交的能力，只有手动绑定的点击事件会生效，而浏览器默认的「输入框聚焦状态下按回车提交表单」逻辑，只会关联表单内的type="submit"按钮，所以按回车没反应是符合原生规则的。
• 按钮设置type="submit"时，你把校验逻辑绑在了按钮的onclick事件上，没有拦截表单原生的默认提交动作：点击按钮/按回车触发提交时，表单会优先执行默认提交行为——默认以GET方式提交到当前页面，触发页面刷新。这时候你的校验JS要么还没执行完页面就被重载，要么重载后密码输入框被重置为空，自然会直接走到密码错误的分支。

不要把校验逻辑绑在按钮点击事件上，转而监听表单的submit事件，第一时间阻止默认提交刷新行为，再执行密码校验，这样不管是点击按钮还是按回车，都会走同一套校验逻辑，也不会出现页面提前刷新的问题。
修正后的完整代码如下：

HTML部分 #

<form id="loginForm">
  <label for="pswd">ENTER PASSWORD</label>
  <br>
  <input class="box" type="password" id="pswd">
  <br>
  <input class="confirm" type="submit" value="SUBMIT" />
</form>

JS部分 #

document.addEventListener('DOMContentLoaded', () => {
  const loginForm = document.getElementById('loginForm');
  const pswdInput = document.getElementById('pswd');
  const CORRECT_PASSWORD = "08012020";

  loginForm.addEventListener('submit', (e) => {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    // 读取输入值时去掉首尾空格，避免用户误输空格导致校验失败
    const inputPassword = pswdInput.value.trim();
    if (inputPassword === CORRECT_PASSWORD) {
      window.location.href = "index.html";
    } else {
      alert("Password is incorrect, Please try again.");
      // 校验失败后清空输入框并重新聚焦，优化输入体验
      pswdInput.value = '';
      pswdInput.focus();
    }
  })
})

补充提示：这种纯前端写死密码的校验方式没有任何安全性，任何人打开浏览器开发者工具就能看到正确密码，仅适合个人本地测试的小页面使用，正式站点的密码校验必须放到服务端完成。

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