JavaScript邮箱有效性验证异常：错误邮箱仍跳转至phase2

我帮你定位到了导致邮箱验证失效的核心问题，咱们来逐一解决：

1. 变量名拼写错误（最关键的问题） #

你在代码中把输入的邮箱值存储到了myemail变量里，但进行正则验证时却误用了一个未定义的designeremail变量。这就导致无论你输入什么内容，正则表达式实际上在测试undefined这个值——而这个值永远不匹配邮箱规则，反而因为变量未声明的全局污染问题，出现了不符合预期的逻辑跳转。

2. 按钮默认提交行为隐患 #

表单中的<button>标签默认类型是submit，即使你给表单设置了onsubmit="return false"，某些情况下仍可能触发默认提交行为，导致页面状态异常。

修正后的完整代码 #

JavaScript 代码 #

function _(x){ return document.getElementById(x); } 
function Phase1() { 
  // 用const声明变量，避免全局变量污染
  const myemail = _("email").value; 
  const emailReg = /^(([^<>()[\]\\.,;:\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,}))$/; 
  
  // 简化条件判断写法，更易读
  if (!emailReg.test(myemail)) { 
    alert('Invalid Email Address'); 
  } else { 
    _("phase1").style.display = "none"; 
    _("phase2").style.display = "block"; 
  } 
}

HTML 代码 #

<form id="myform" onsubmit="return false" > 
  <div id="phase1"> 
    <label>Email</label>
    <div><input type="text" id="email" name="email" required></div> 
    <div>
      <!-- 明确指定button类型为button，避免默认提交行为 -->
      <button type="button" onclick="Phase1()" class="btn"><strong>Next</strong></button>
    </div> 
  </div> 
  <!-- 初始化时隐藏phase2，符合页面逻辑预期 -->
  <div id="phase2" style="display: none;"> 
    <label>Name</label>
    <div><input type="text" id="mname" name="myname" required></div> 
    <div>
      <button type="button" onclick="Phase2()" class="btn"><strong>Submit</strong></button>
    </div> 
  </div> 
</form>

额外优化点：我给phase2添加了初始的display: none样式，这样页面加载时就不会显示第二阶段的内容，更符合业务逻辑。

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