表单验证：从错误对象展示错误及追加文本到HTML的实现

DevOps 小满

2026-5-27

我来帮你搞定这个表单验证的问题！你现在的核心痛点是不知道怎么把errorText里的错误信息取出来，然后正确渲染到页面上对吧？咱们一步步来调整你的代码，解决这个问题：

首先，先梳理下你原代码里的几个小问题：

直接给select追加errors数组是行不通的，appendChild只能接收DOM元素，不能直接放数组
错误信息的收集和渲染逻辑没打通，只存了错误码但没关联到errorText的文本
表单点击后会直接提交，应该先阻止默认行为完成验证

方案1：集中展示所有错误提示

我们可以先在HTML里加一个专门放错误提示的容器，然后在验证时收集所有错误文本，创建DOM元素追加到这个容器里：

HTML 部分（新增错误容器）

<div class="error-container"></div>
<form>
  <!-- 你的表单元素：First name、Last name、DOB、Country下拉框、Email、Password、Address -->
  <button class="btn">Submit</button>
</form>

修改后的 JS 代码

var btn = document.querySelector('.btn');
btn.addEventListener('click', checkForm);
var select = document.querySelector('.required');
var inputs = document.querySelectorAll('.form-element');
var errorContainer = document.querySelector('.error-container'); // 获取错误容器
var errorText = {
  1 : "The field 'First name' is empty",
  2: "The field 'Last name' is empty",
  3: "Pick your date of birth",
  4: "Pick a country",
  5: "The field 'E-mail' is empty",
  6: "Enter your password",
  7: "The field 'Address' is empty",
  8: "Enter correct email",
  9: "Current date is not allowed"
};

function checkForm(e) {
  e.preventDefault(); // 阻止表单默认提交，先做验证
  let errors = [];
  let isValid = true;
  errorContainer.innerHTML = ''; // 每次验证清空旧错误
  // 重置所有输入框样式
  [...inputs, select].forEach(el => el.style.borderColor = '');

  // 验证所有输入框
  inputs.forEach((input, index) => {
    const inputValue = input.value.trim();
    if (!inputValue) {
      input.style.borderColor = 'red';
      // 根据输入框顺序对应errorText的键（假设第一个输入框对应First name=1）
      errors.push(errorText[index + 1]);
      isValid = false;
    } else {
      // 额外验证邮箱格式（假设第5个输入框是Email，index=4）
      if (index === 4 && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inputValue)) {
        errors.push(errorText[8]);
        input.style.borderColor = 'red';
        isValid = false;
      }
      // 验证日期是否为当前日期（假设第3个输入框是DOB，index=2）
      if (index === 2) {
        const today = new Date().toISOString().split('T')[0];
        if (inputValue === today) {
          errors.push(errorText[9]);
          input.style.borderColor = 'red';
          isValid = false;
        }
      }
    }
  });

  // 验证下拉框
  if (select.selectedIndex === 0) { // 假设默认未选择的选项是索引0
    select.style.borderColor = 'red';
    errors.push(errorText[4]);
    isValid = false;
  }

  // 把错误信息渲染到页面
  if (!isValid) {
    errors.forEach(msg => {
      const errorEl = document.createElement('p');
      errorEl.style.color = 'red';
      errorEl.textContent = msg;
      errorContainer.appendChild(errorEl);
    });
  } else {
    // 验证通过，提交表单
    this.form.submit();
  }
}

方案2：在每个字段旁单独显示错误

如果想让用户更清楚哪个字段出错了，可以给每个表单元素加一个专属的错误提示位：

HTML 示例（每个字段加错误提示）

<div class="form-group">
  <label>First name</label>
  <input type="text" class="form-element">
  <span class="field-error"></span>
</div>
<!-- 其他字段同理 -->
<button class="btn">Submit</button>

对应 JS 调整（部分代码）

// 验证输入框时，把错误放到对应字段的提示位
inputs.forEach((input, index) => {
  const errorSpan = input.nextElementSibling;
  errorSpan.textContent = ''; // 清空旧错误
  const inputValue = input.value.trim();
  
  if (!inputValue) {
    input.style.borderColor = 'red';
    errorSpan.textContent = errorText[index + 1];
    errorSpan.style.color = 'red';
    isValid = false;
  } else {
    input.style.borderColor = '';
    // 邮箱验证逻辑...
    if (index ===4 && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inputValue)) {
      errorSpan.textContent = errorText[8];
      errorSpan.style.color = 'red';
      isValid = false;
    }
  }
});

关键逻辑说明

阻止默认提交：用e.preventDefault()避免表单直接提交，先完成验证流程
错误信息关联：通过输入框的索引对应errorText的键，把错误文本存入数组
DOM元素创建：用document.createElement创建错误提示元素，设置样式后追加到页面
状态重置：每次验证前清空旧错误和输入框样式，避免残留提示影响体验

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