如何使用Javascript验证<ul>标签内的多个电子邮箱地址

问题原因 #

• 传参错误：for循环中传给validEmail的是p标签DOM元素，不是邮箱文本内容，正则校验非字符串内容必然返回失败
• 校验结果未接收：for循环里调用validEmail的返回值没有被存储判断，循环执行后没有记录是否存在非法邮箱
• 最终判断逻辑错误：最后的if分支调用validEmail时没有传任何参数，相当于校验undefined，永远返回false，所以始终得到校验失败的结果
• 兼容性隐患：getElementsByTagName返回的是HTMLCollection类数组对象，部分浏览器不支持直接调用forEach方法，容易触发运行错误

修正后代码 #

function checkEmail() {
  // 直接用querySelectorAll获取所有p标签，返回NodeList支持forEach
  const elements = document.querySelectorAll("#ul-emaillist li p");
  // 初始化校验结果为合法
  let isAllValid = true;

  elements.forEach(element => {
    const emailText = element.innerText.trim();
    console.log('校验邮箱：', emailText);
    // 只要有一个邮箱不合法，就把结果设为false
    if (!validEmail(emailText)) {
      isAllValid = false;
      console.log("非法邮箱：", emailText);
    }
  });

  if (!isAllValid) {
    console.log("存在不符合格式的邮箱");
    return false;
  } else {
    console.log("所有邮箱格式合法");
    return true;
  }
}

function validEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
};

原有HTML代码无需修改可直接正常使用。

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