JavaScript OnBlur事件阻止提交HTML表单

OnBlur事件是一个JavaScript事件，当一个元素失去焦点时触发。在HTML表单中，可以使用OnBlur事件来验证用户输入的数据，并在必要时阻止表单提交。

以下是一个简单的示例，演示如何使用OnBlur事件验证用户输入的电子邮件地址，并在地址无效时阻止表单提交：

<form onsubmit="return validateForm()">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" onblur="validateEmail()">
 <input type="submit" value="Submit">
</form><script>
function validateEmail() {
  var emailInput = document.getElementById("email");
  var email = emailInput.value;
  var re = /\S+@\S+\.\S+/;
  if (re.test(email)) {
    emailInput.style.borderColor = "";
  } else {
    emailInput.style.borderColor = "red";
  }
}

function validateForm() {
  var emailInput = document.getElementById("email");
  if (emailInput.style.borderColor == "red") {
    alert("Please enter a valid email address");
    return false;
  }
  return true;
}
</script>

在这个示例中，当用户点击表单中的其他元素时，OnBlur事件会触发validateEmail()函数，该函数会检查电子邮件地址是否有效。如果电子邮件地址无效，则会将输入框的边框颜色更改为红色。

当用户尝试提交表单时，onsubmit事件会触发validateForm()函数，该函数会检查电子邮件地址是否有效。如果电子邮件地址无效，则会弹出警告框并阻止表单提交。

总之，OnBlur事件可以用于验证用户输入的数据，并在必要时阻止表单提交。