表单开发需求：错误时阻止提交，重置按钮清除警告信息

问题说明 #

需要开发包含必填与选填字段的表单，实现以下功能：

• 表单验证通过时触发提交（打开外部邮件应用，无需发送到服务器）；验证不通过时阻止提交，并显示错误警告。
• 点击重置按钮时，不仅清空输入框内容，还要清除错误警告信息。

现有代码仅针对部分必填字段做了验证，且存在逻辑错误（如条件判断误用赋值运算符），同时未处理DNI必填项、重置操作未清除错误提示，需调整适配需求。

修正后的JavaScript代码 #

const nombre    = document.getElementById("nombre")
const apellido1 = document.getElementById("apellido1")
const movil     = document.getElementById("movil")
const dni       = document.getElementById("dni") // 新增DNI元素获取
const form      = document.getElementById("formulario")
const parrafo   = document.getElementById("advertencia")
let regexMovil  = /^[6789]\d{8}$/
// DNI验证正则示例：8位数字+1位大小写字母
let regexDni = /^\d{8}[A-Za-z]$/

form.addEventListener("submit", e => {
  let advertencia = ""
  let entrar      = false

  // 先清空之前的错误提示
  parrafo.innerHTML = ""

  // 验证必填字段
  if (!nombre.value.trim()) {
    advertencia += "请输入你的姓名<br>"
    entrar = true
  }

  if (!apellido1.value.trim()) {
    advertencia += "请输入你的姓氏<br>"
    entrar = true
  }

  if (!regexMovil.test(movil.value.trim())) {
    advertencia += "请输入有效的手机号码（以6/7/8/9开头，共9位数字）<br>"
    entrar = true
  }

  if (!regexDni.test(dni.value.trim())) {
    advertencia += "请输入有效的DNI（8位数字+1位字母）<br>"
    entrar = true
  }

  // 条款勾选为必填项时添加此验证
  const terminos = document.getElementById("terminoss")
  if (!terminos.checked) {
    advertencia += "请接受条款与条件<br>"
    entrar = true
  }

  if (entrar) {
    e.preventDefault() // 验证失败，阻止表单默认提交行为
    parrafo.innerHTML = advertencia
  }
  // 验证通过时，不执行preventDefault，表单将自动触发默认提交（打开邮件应用）
})

// 优化重置功能
function reset() {
  document.getElementById("formulario").reset()
  document.getElementById("advertencia").innerHTML = "" // 清除错误提示内容
}

修正后的HTML代码 #

<html>
<body>
  <div class="formulario">
    <form id="formulario" name="formulario" action="mailto:example@test.com" method="post" enctype="text/plain">
      <fieldset>
        <legend>注册表单</legend>
        <p>标注有星号(*)的字段为必填项</p>
        <h1>姓名</h1>
        <label for="nombre">姓名*</label><br>
        <input type="text" id="nombre" name="nombre"><br>
        <label for="apellido1">姓氏*</label><br>
        <input type="text" id="apellido1" name="apellido1"><br>
        <label for="apellido2">中间名</label><br>
        <input type="text" id="apellido2" name="apellido2"><br>
        <h1>电话号码</h1>
        <label for="movil">手机号码*</label><br>
        <input type="text" id="movil" name="movil"><br>
        <label for="fijo">固定电话</label><br>
        <input type="text" id="fijo" name="fijo"><br>
        <h1>DNI</h1>
        <label for="dni">DNI号码*</label><br>
        <input type="text" id="dni" name="dni"><br>
        <h1>出生日期</h1>
        <label for="cumple">出生日期</label><br>
        <input type="date" id="cumple" name="cumple">
        <div class="botones2">
          <input type="checkbox" name="terminoss" id="terminoss">我接受条款与相关说明<br>
          <input type="checkbox" name="spam" id="spam">我希望接收推广邮件<br>
        </div>
        <div class="botones">
          <input type="button" value="重置" onclick="reset()">
          <input type="submit" value="提交">
        </div>
        <p class="advertencia" id="advertencia"></p>
      </fieldset>
    </form>
  </div>
  <script src="validform.js"></script>
</body>
</html>

关键调整说明 #

• 提交逻辑修正：每次提交前重置错误信息和状态变量，避免错误内容累加；仅在验证失败时调用e.preventDefault()阻止提交，验证通过时保留表单默认行为（打开邮件应用）。
• 必填字段补全：补全了DNI字段的验证逻辑，可按需添加条款勾选的必填验证。
• 重置功能优化：在重置函数中新增清除错误提示的代码，确保重置后页面无残留错误信息。
• 细节优化：使用trim()去除输入内容首尾空格，避免空字符绕过验证；调整提示文本为中文，贴合使用场景。

内容的提问来源于stack exchange，提问作者Alejandro González