表单验证空字段提示仅显示约3毫秒即消失，求问题原因

嘿，这个问题我太熟了！咱们一步步来拆解：

核心原因：表单默认提交行为没被阻止 #

你写的validar函数确实会把提示文本加到输入框里，但浏览器在执行完这个函数后，立刻触发了表单的默认提交动作——因为你的表单没有指定action属性，浏览器会默认把表单提交到当前页面，导致页面刷新。页面一刷新，所有DOM元素都会被重新渲染，刚加上的提示自然就瞬间没了，看起来就只显示了几毫秒。

为啥会这样？因为你的validar函数最后没有返回false，浏览器就认为验证通过了，直接走默认提交流程了。

修复方案：阻止表单默认提交 #

只需要修改validar函数，在验证不通过时返回false，就能中断表单的默认提交流程，让提示文本保留在页面上：

修改后的JavaScript代码 #

var flag = []; 
function validar(form) { 
  // 先清空flag，避免上次验证的残留内容干扰
  flag.length = 0;

  if (form.name.value.trim() === "") { 
    flag.push("name"); 
  } 
  if (form.email.value.trim() === "") { 
    flag.push("email"); 
  } 
  if (form.message.value.trim() === "") { 
    flag.push("message"); 
  } 

  if (flag.length > 0) {
    errorMsg(flag); 
    return false; // 关键：返回false阻止表单提交
  }
  return true; // 验证通过时允许表单正常提交
} 

function errorMsg(flag) { 
  for (var i = 0; i < flag.length; i++) { 
    var errorInput = document.getElementById(flag[i]); 
    // 替换value而不是追加，避免重复提示叠加
    errorInput.value = "You Must Enter " + flag[i]; 
  } 
}

额外优化建议（提升用户体验） #

直接修改输入框的value体验不太友好——用户输入的内容会被覆盖。建议给每个输入框添加专门的错误提示元素，比如在输入框下方加红色提示文字：

修改后的HTML代码 #

<form onsubmit="return validar(this)"> 
  <label for="name">Nombre</label><br> 
  <input type="text" name="name" id="name"><br>
  <span id="name-error" style="color: red; font-size: 0.8em;"></span><br>
  
  <label for="email">Email</label><br> 
  <input type="text" name="email" id="email"><br>
  <span id="email-error" style="color: red; font-size: 0.8em;"></span><br>
  
  <label for="message">Mensaje</label><br> 
  <textarea name="message" id="message"></textarea><br>
  <span id="message-error" style="color: red; font-size: 0.8em;"></span><br>
  
  <button type="submit" name="button">Enviar</button> 
</form>

对应修改的errorMsg函数 #

function errorMsg(flag) { 
  // 先清空所有错误提示，避免残留
  document.querySelectorAll('[id$="-error"]').forEach(el => el.textContent = '');
  
  for (var i = 0; i < flag.length; i++) { 
    var errorElement = document.getElementById(flag[i] + "-error"); 
    errorElement.textContent = "You Must Enter " + flag[i]; 
  } 
}

这样用户输入的内容不会被覆盖，错误提示也更清晰直观~

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