点击提交按钮时验证含@与.com的邮箱弹窗失效问题排查

问题根源分析 #

1. 点击事件未绑定：原代码中的myFunction函数没有和提交按钮关联，按钮点击时不会触发该函数。
2. 错误的按钮状态判断：代码里button.clicked == true是无效写法，按钮不存在clicked属性，且点击事件触发时，函数本身就是在点击动作下执行的，无需额外判断按钮状态。

修正后的完整代码 #

HTML

<input type="email" placeholder="Your email" id="e">
<input type="submit" id="s" onclick="myFunction()">

JavaScript

function myFunction() {
  const email = document.getElementById("e").value;
  // 直接校验邮箱是否包含@和.com
  if (email.includes('@') && email.includes('.com')) {
    alert("Thank you for subscribing!");
  } else {
    alert("Please enter a valid email.");
  }
}

CSS（保持原代码不变）

input {
  border: 0;
  padding: 10px;
  font-size: 18px;
}

input[type="submit"] {
  background: red;
  color: white;
  border: solid black;
}

额外说明 #

如果把输入框和按钮放在<form>标签内，需要阻止表单默认提交行为（避免页面刷新导致提示框一闪而过），代码调整如下：

HTML

<form>
  <input type="email" placeholder="Your email" id="e">
  <input type="submit" id="s" onclick="myFunction(event)">
</form>

JavaScript

function myFunction(event) {
  event.preventDefault(); // 阻止表单默认提交刷新
  const email = document.getElementById("e").value;
  if (email.includes('@') && email.includes('.com')) {
    alert("Thank you for subscribing!");
  } else {
    alert("Please enter a valid email.");
  }
}

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