HTML按钮触发JS表单校验：错误提示显示后消失问题求助

问题根源 #

你的问题出在form表单内的button默认是submit类型，点击后会自动触发表单提交，导致页面刷新，错误提示刚显示就被刷新掉。即使你加了return语句，也可能没正确拦截表单的默认提交行为。

有效解决方案 #

核心思路：阻止表单默认提交行为，同时优化校验逻辑，明确在校验不通过时阻止提交，通过时再允许提交。

步骤1：修改HTML表单的提交触发方式

把按钮的onclick改成表单的onsubmit事件，直接拦截表单提交行为：

<form onsubmit="return checkform()">
  <label for="nume">姓名:</label>
  <input type="text" id="nume" name="nume" value=""><br>
  <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" autocomplete="on" value=""><br>
  <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">产品名称:</label>
  <input type="text" id="produs" name="produs" value=""><br>
  <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button type="submit">提交</button>
</form>

步骤2：优化JS校验函数

• 先清空所有旧错误提示，避免残留
• 记录校验是否通过的状态
• 校验不通过时返回false阻止提交；通过时返回true允许提交
• 修复原代码中无效的innerHTML操作（input元素无需清空innerHTML，只需处理错误提示元素）

修改后的JS代码：

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  // 清空所有错误提示
  document.getElementById("numegresit").innerHTML = "";
  document.getElementById("emailgresit").innerHTML = "";
  document.getElementById("prodgresit").innerHTML = "";

  // 获取输入值并去除首尾空格
  var a = document.getElementById("nume").value.trim();
  var b = document.getElementById("email").value.trim();
  var c = document.getElementById("produs").value.trim();

  // 标记校验是否通过
  let isValid = true;

  // 校验姓名
  if (!a.match(numecomplet)){
    document.getElementById("numegresit").innerHTML = "姓名格式不正确";
    isValid = false;
  }

  // 校验邮箱
  if (!b.match(formatemail)){
    document.getElementById("emailgresit").innerHTML = "邮箱格式不正确";
    isValid = false;
  }
  
  // 校验产品名称
  if (!c.match(numeprodus)) {
    document.getElementById("prodgresit").innerHTML = "产品名称格式不正确";
    isValid = false;
 }

  // 返回校验结果：false阻止提交，true允许提交
  return isValid;
}

额外说明 #

如果之前尝试return语句没生效，大概率是因为你把return加在了按钮的onclick上，而非表单的onsubmit上。只有表单的onsubmit事件返回false，才能真正阻止提交行为。

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