HTML表单验证触发alert后字段被清空，如何阻止该情况？

问题原因 #

表单内未指定type属性的<button>默认是submit提交类型，你当前的绑定逻辑没有阻止校验失败时的默认提交行为，表单会默认提交到当前页面触发刷新，就会清空所有已输入的字段内容。

修复方案 #

你可以任选以下一种方案修改即可：

• 方案1：修改按钮的点击事件绑定，接收校验函数的返回值
  把HTML里的按钮代码

  <button onclick="check()">LOGIN</button>
  

  改成

  <button onclick="return check()">LOGIN</button>
  

  这样校验失败返回false时，会直接阻止默认的表单提交行为，页面不会刷新，已输入的内容会保留。另外你当前的校验通过逻辑里只设置了表单的action属性，没有触发提交，需要在校验通过的分支最后加一行document.getElementById("form").submit()才能正常提交数据。

• 方案2：显式指定按钮为普通按钮，手动控制提交逻辑
  把按钮改成普通按钮，默认不会触发提交：

  <button type="button" onclick="check()">LOGIN</button>
  

  同样需要在校验全部通过的分支末尾添加表单提交代码：

  document.getElementById("form").action = "check.php"
  document.getElementById("form").submit() // 新增这行
  

优化建议 #

更规范的做法是直接绑定表单的onsubmit事件，不需要单独给按钮绑定点击事件，这样回车提交表单也能触发校验：

1. 给form标签添加事件绑定：

   <form id="form" method="POST" onsubmit="return check()">
   

2. 按钮保持默认的submit类型即可，不需要绑定点击事件：

   <button>LOGIN</button>
   

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