如何在现有JS表单验证代码中集成textarea验证？

问题背景 #

作为JavaScript新手，在开发前端表单验证时，已完成input元素的验证，但无法将textarea（id为mensaje）的验证集成到现有代码中，需要实现该字段的验证逻辑。

实现步骤及修改后的代码 #

1. 核心JavaScript修改

在现有验证体系中添加textarea的规则、状态和事件监听：

const formulario = document.getElementById('formulario');
// 同时选中input和textarea元素
const camposFormulario = document.querySelectorAll('#formulario input, #formulario textarea');

// 添加textarea的正则表达式（示例：允许任意字符，长度10-200）
const expresiones = {
    nombre: /^[a-zA-ZÀ-ÿ\s]{1,40}$/, 
    correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
    telefono: /^\d{9,13}$/,
    mensaje: /^.{10,200}$/ // 至少10个字符，最多200个
}

// 添加mensaje的状态追踪
const campos = {
    nombre: false,
    correo: false,
    telefono: false,
    mensaje: false
}

const validarFormulario = (e) => {
  switch (e.target.name) {
        case "nombre":
            validarCampo(expresiones.nombre, e.target, 'nombre');
        break;
      case "correo":
          validarCampo(expresiones.correo, e.target, 'correo');
      break;
      case "telefono":
          validarCampo(expresiones.telefono, e.target, 'telefono');
      break;
      // 添加mensaje的验证分支
      case "mensaje":
          validarCampo(expresiones.mensaje, e.target, 'mensaje');
      break;
  }
}

const validarCampo = (expresion, input, campo) => {
  if(expresion.test(input.value)){
      document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-incorrecto');
      document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-correcto');
      document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.remove('formulario__input-error-activo');
      campos[campo] = true;
  } else {
      document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-incorrecto');
      document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-correcto');
      document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.add('formulario__input-error-activo');
      campos[campo] = false;
  }
}

// 为所有选中的表单元素添加事件监听
camposFormulario.forEach((campo) => {
  campo.addEventListener('keyup', validarFormulario);
  campo.addEventListener('blur', validarFormulario);
});

formulario.addEventListener('submit', (e) => {
  e.preventDefault();

  // 提交时验证所有字段，包括mensaje
  if(campos.nombre && campos.correo && campos.telefono && campos.mensaje){
      formulario.reset();

      document.getElementById('formulario__mensaje-exito').classList.add('formulario__mensaje-exito-activo');
      setTimeout(() => {
          document.getElementById('formulario__mensaje-exito').classList.remove('formulario__mensaje-exito-activo');
      }, 5000);

      document.querySelectorAll('.formulario__grupo-correcto').forEach((icono) => {
          icono.classList.remove('formulario__grupo-correcto');
      });
  } else {
      document.getElementById('formulario__mensaje').classList.add('formulario__mensaje-activo');
      setTimeout(() => {
          document.getElementById('formulario__mensaje').classList.remove('formulario__mensaje-activo');
      }, 3000);
  }
});

2. HTML调整（完善错误提示文本）

修改grupo__mensaje下的错误提示，让用户明确规则：

<div class="formulario__grupo" id="grupo__mensaje">
    <div class="formulario__grupo-input">
        <textarea name="mensaje" id="mensaje" placeholder="MENSAJE_" rows="3"></textarea>
    </div>
    <p class="formulario__input-error">El mensaje debe tener entre 10 y 200 caracteres.</p>
</div>

3. CSS适配（为textarea添加错误状态样式）

在现有CSS末尾添加：

.formulario__container .formulario__grupo-incorrecto textarea {
    border: 3px solid #bb2929;
}

关键说明 #

• 正则表达式可根据需求修改，比如允许特殊字符或调整长度限制
• 事件监听同时覆盖input和textarea，保持验证逻辑一致
• 提交验证必须包含campos.mensaje，否则该字段不会影响表单提交状态

内容的提问来源于stack exchange，提问作者Hernan G. Naguibin