JS事件监听器失效致表单提交刷新，报addEventListener空引用错误

你遇到的控制台报错、表单提交直接刷新，本质是两类代码问题连锁触发的：

• 报错Cannot read property 'addEventListener' of null的直接原因：代码执行到form.addEventListener('submit', ...)这一行时，form变量值为null，也就是document.getElementById('form')没有匹配到对应的DOM节点。一旦JS抛出这个错误，整个执行流会直接中断，根本没机会执行e.preventDefault()拦截表单的默认提交行为，自然会触发页面跳转刷新。
• 代码和DOM结构不匹配的硬bug：核对两边的id属性可以发现，JS里获取姓名输入框的选择器写的是document.getElementById('name')，但HTML里这个输入框的实际id是client，页面上根本不存在id为name的节点，这行代码拿到的永远是null，后续校验逻辑执行到操作这个空值时也会连锁抛错。

• 修正错误的DOM选择器引用
  把JS里获取姓名输入框的代码改成和HTML实际id一致的写法：

  // 原错误写法：匹配了不存在的id
  const client = document.getElementById('name');
  
  // 修正后写法：对应HTML中<input id="client">的节点
  const client = document.getElementById('client');
  

• 增加DOM加载完成的执行保护
  虽然你现在把<script>标签放在了body最末尾，理论上DOM已经解析完成，但可以再加一层兜底保护，避免脚本路径错位、顺序写错时出现拿不到元素的问题：把所有DOM操作、事件绑定的代码全部包裹在DOM加载完成的事件回调里：

  // 等待页面DOM完全解析完成后再执行内部逻辑
  document.addEventListener('DOMContentLoaded', function() {
    // 把原代码里的DOM变量声明、所有工具函数、事件监听绑定全部移到这个回调内部
    const form = document.getElementById('form');
    const client = document.getElementById('client');
    const email = document.getElementById('email');
    const message = document.getElementById('text-message');
  
    // 原有showError、showSuccess、checkEmail、checkRequired、getFieldName函数全部放在这里
  
    // 原有提交事件监听放在这里
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      checkRequired([client, email, message]);
      checkEmail(email);
    });
  });
  

• 小体验优化
  原来的getFieldName函数直接截取id字符串做展示，对应id为text-message的输入框会生成Text-message的提示文案，可以调整成友好的映射逻辑，比如姓名字段提示Name、消息字段提示Message，减少用户理解成本。

完成修改后刷新页面：

• 控制台不再抛出TypeError报错
• 点击提交按钮时不会再触发页面默认的GET刷新跳转
• 空输入字段会显示红色边框和对应的必填提示
• 邮箱格式不符合规则时会弹出对应的格式校验提示

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