已绑定addEventListener事件的form表单能否切换classList？

先给出修复完成可正常运行的代码：

// 请替换选择器为你页面内实际的对应元素选择器
const form = document.querySelector('form');
const inputEmail = document.querySelector('input[name="email"]');

const checkUserEmail = function (e) {
  const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  e.preventDefault();
  if (!regex.test(inputEmail.value.trim())) {
    this.classList.toggle("error");
  } else {
    // 若校验通过后不需要清空输入框可删除下一行
    inputEmail.value = "";
    // 若校验通过后需要实际提交表单可添加下一行
    // this.submit()
  }
};

document.addEventListener('DOMContentLoaded', function() {
  form.addEventListener("submit", checkUserEmail, false);
})

你原代码的问题点如下：

• 类名操作语法错误：classList.toggle传入的参数不需要加CSS选择器的.前缀，你原代码写的.error会导致无法正确匹配类名，改为error即可
• 正则表达式语法错误：域名匹配部分的.没有转义，正则中.默认匹配任意字符，要匹配实际的点符号需要加转义符写成\.
• 缺失DOM元素获取逻辑：原代码直接使用inputEmail和form变量，如果没有提前通过选择器获取对应DOM元素，会触发未定义引用报错
• 事件绑定时机问题：如果脚本放在head标签内加载，执行时DOM还未渲染完成，绑定事件会失败，建议把事件绑定逻辑放在DOMContentLoaded回调中，或者把脚本放在body标签末尾
• 可选优化：邮箱校验前先对输入值做trim()处理，避免用户输入的首尾空格导致校验失败

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