如何使用JavaScript实现邮箱校验并输出@与点号的位置索引

现有代码问题 #

当前代码存在3个会导致功能异常的核心问题：

• if/else 未使用大括号包裹多行执行语句，存在语法错误，逻辑分支不会按预期执行
• 正则规则不支持域名段带.的场景，无法匹配a.b@c.d这类多级域名格式
• 未声明atpos/dotpos变量会污染全局作用域，document.write在页面加载完成后调用会覆盖整个页面内容

修正后可直接运行的完整代码 #

<html>
<body>
<div class="form"> 
<label for="email">Enter Email: </label> 
<input type="text" id="email"> 
<button onclick="validemail()" type="button">Submit</button>
<div id="result"></div>
</div>
<script>
function validemail() 
{
  const emailID = document.getElementById("email").value.trim();
  // 适配a.b@c.d、a@b.c、多级域名格式的校验正则
  const mailformat = /^[A-Za-z0-9.]+@[A-Za-z0-9]+(\.[A-Za-z0-9]+)*\.[A-Za-z]{2,4}$/;
  const atpos = emailID.indexOf("@");
  const dotpos = emailID.lastIndexOf(".");
  const resultDom = document.getElementById("result");

  if (mailformat.test(emailID)) {
    alert("Valid Email");
    resultDom.innerHTML = `
      <p>Email: ${emailID}</p>
      <p>atpos = ${atpos}</p>
      <p>dotpos = ${dotpos}</p>
    `;
  } else {
    alert("Invalid Email, Try Again");
    resultDom.innerHTML = "";
  }
}
</script>
</body>
</html>

效果验证 #

输入abc@gmail.com时，输出结果完全符合预期：

Email: abc@gmail.com
atpos = 3
dotpos = 9

输入a.b@c.d、a@b.c均可正常通过校验，同时正确返回对应位置索引。

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