JavaScript邮箱验证功能失效求助（Frontend Mentor挑战场景）

你的代码存在两个核心问题导致验证功能无法正常工作，以下是具体修复步骤：

1. 正则表达式定义错误 #

你将正则表达式写成了字符串格式，但test()是RegExp对象的专属方法，字符串无法调用该方法。同时，字符串中的反斜杠\会被自动转义，比如\w会变成普通字符w，直接导致正则规则完全失效。

修复方法是改用正则字面量格式（用/ /包裹）：

function validate() {
  var email = document.getElementById("email").value;
  // 使用正则字面量，无需额外转义反斜杠
  var reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6}$/;
  var result = reg.test(email);

  if (!result) {
    // 显示页面预设的错误提示，替代alert更符合需求
    document.querySelector('.error').style.display = 'block';
    document.querySelector('.errormsg').style.display = 'block';
    return false;
  }
  // 验证通过时隐藏错误提示
  document.querySelector('.error').style.display = 'none';
  document.querySelector('.errormsg').style.display = 'none';
  return true;
}

2. 错误提示的默认状态处理 #

页面中的错误图标和提示文本默认应该隐藏，否则页面加载时就会显示错误状态。需要添加一段CSS：

/* 默认隐藏错误元素 */
.error, .errormsg {
  display: none;
}

额外优化建议 #

• 把输入框的type="text"改成type="email"，可获得浏览器原生的邮箱格式验证作为补充。
• 正则规则中把域名后缀长度限制{2,3}改成{2,6}，支持.io、.app等更长的域名后缀。

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