表单验证是Web开发中非常重要的一部分，它可以帮助我们确保用户输入的数据是有效和安全的，在JavaScript中，我们可以使用各种方式来进行表单验证，下面是一个使用原生JavaScript的简单示例。
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
</head>
<body>
<form id="myForm">
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"><br>
<span id="usernameError" style="color:red"></span><br>
<label for="email">邮箱:</label><br>
<input type="text" id="email" name="email"><br>
<span id="emailError" style="color:red"></span><br>
<input type="submit" value="提交">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
// 阻止表单默认提交行为，因为我们自己处理提交
event.preventDefault();
// 清除错误信息
document.getElementById('usernameError').textContent = '';
document.getElementById('emailError').textContent = '';
// 获取用户输入的用户名和邮箱
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
// 验证用户名
if (username === '') {
document.getElementById('usernameError').textContent = '用户名不能为空！';
return false;
}
// 验证邮箱
if (email === '') {
document.getElementById('emailError').textContent = '邮箱不能为空！';
return false;
} else if (!isValidEmail(email)) {
document.getElementById('emailError').textContent = '邮箱格式不正确！';
return false;
}
// 提交表单，可以发送到服务器进行处理
// ...
});
// 判断邮箱格式是否正确
function isValidEmail(email) {
var pattern = /^([a-zA-Z0-9._%-])+@([a-zA-Z0-9.-])+\.([a-zA-Z]{2,4})$/;
return pattern.test(email);
}
</script>
</body>
</html>以上代码示例演示了如何使用原生JavaScript进行简单的表单验证，包括验证用户名和邮箱是否为空，以及邮箱格式是否正确，这只是一个基本的示例，实际上你可能需要更复杂的验证规则，例如验证密码强度、手机号码等，这种情况下，你可以根据具体需求定制验证规则，或者使用一些现成的表单验证库，例如jQuery Validation Plugin等。
