在HTML中，表单验证可以通过JavaScript进行其他事件监听来实现。以下是一个简单的例子，展示了如何在HTML表单的输入字段中使用pattern属性进行简单的正则表达式验证，以及如何使用addEventListener来监听blur和input事件，以便在用户输入时进行更复杂的验证。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("myForm");
var email = document.getElementById("email");
// 使用 blur 事件进行验证
email.addEventListener("blur", function() {
// 验证邮箱格式
var emailValue = email.value;
if (!emailValue.includes("@")) {
alert("Invalid email address");
email.focus();
}
});
// 使用 input 事件进行实时验证
email.addEventListener("input", function() {
// 可以添加更复杂的验证逻辑
});
// 表单提交事件
form.addEventListener("submit", function(event) {
// 阻止表单提交，如果有验证失败
event.preventDefault();
alert("Form submission prevented for demonstration purposes.");
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
<button type="submit">Submit</button>
</form>
</body>
</html>在这个例子中，我们为email输入字段添加了pattern属性来指定一个正则表达式，用于验证基本的电子邮件格式。同时，我们使用addEventListener来监听blur和input事件，以及表单的submit事件。当用户尝试离开该字段或提交表单时，会触发相应的事件处理函数，进行进一步的验证。如果验证失败，事件处理函数会阻止表单的提交，并可能设置焦点回到有问题的字段上。