<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var username = document.getElementById('username').value;
if (username === "") {
alert("Username cannot be empty");
return false;
}
return true;
}
</script>
</body>
</html>
在这个示例中，当用户提交表单时，validateForm 函数会被调用。如果用户名为空，表单提交将被阻止，并显示一个警告消息。
2. 外部事件处理
外部事件处理是将事件处理程序定义在JavaScript代码中，并在HTML元素中通过JavaScript绑定事件。这种方法更模块化，更适合复杂的逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
var username = document.getElementById('username').value;
if (username === "") {
alert("Username cannot be empty");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们将 onsubmit 事件处理程序绑定到表单元素 myForm 上。在处理程序中，如果用户名为空，表单提交将被阻止，并显示一个警告消息。
二、复杂条件判断和表单验证
在实际应用中，表单验证通常不仅仅是检查是否为空，还包括各种复杂的条件判断，如格式验证、长度限制、交叉验证等。下面将详细介绍一些常见的表单验证场景。
1. 格式验证
格式验证用于检查输入值是否符合特定的格式，例如电子邮件地址、电话号码等。可以使用正则表达式来实现格式验证。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form id="myForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
var email = document.getElementById('email').value;
var emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们使用一个正则表达式来检查电子邮件地址的格式。如果输入的电子邮件地址不符合格式，表单提交将被阻止，并显示一个警告消息。
2. 长度限制
长度限制用于检查输入值的长度是否在指定范围内。例如，用户名的长度必须在5到15个字符之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
var username = document.getElementById('username').value;
if (username.length < 5 || username.length > 15) {
alert("Username must be between 5 and 15 characters long");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们检查用户名的长度是否在5到15个字符之间。如果不符合长度限制，表单提交将被阻止，并显示一个警告消息。
3. 交叉验证
交叉验证用于检查多个输入值之间的相互关系。例如，密码和确认密码必须匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form id="myForm">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
alert("Passwords do not match");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们检查密码和确认密码是否匹配。如果不匹配，表单提交将被阻止，并显示一个警告消息。
三、提高用户体验的其他技巧
除了基本的表单验证，还有一些技巧可以提高用户体验，例如实时验证、错误提示样式等。
1. 实时验证
实时验证是在用户输入时立即进行验证，而不是等到提交表单时才进行。这可以通过绑定 input 或 change 事件来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
.error {
border-color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('username').addEventListener('input', function() {
var username = this.value;
if (username.length < 5 || username.length > 15) {
this.classList.add('error');
} else {
this.classList.remove('error');
}
});
document.getElementById('myForm').onsubmit = function(event) {
var username = document.getElementById('username').value;
if (username.length < 5 || username.length > 15) {
alert("Username must be between 5 and 15 characters long");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们在用户输入用户名时立即进行长度验证。如果用户名长度不符合要求，输入框会变红，并显示错误提示。
2. 错误提示样式
为了提高用户体验，可以通过样式和提示信息来引导用户修正错误。例如，可以在输入框下面显示错误消息，并使用CSS样式高亮错误输入框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
.error {
border-color: red;
}
.error-message {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<div id="usernameError" class="error-message"></div>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('username').addEventListener('input', function() {
var username = this.value;
var errorMessage = document.getElementById('usernameError');
if (username.length < 5 || username.length > 15) {
this.classList.add('error');
errorMessage.textContent = "Username must be between 5 and 15 characters long";
} else {
this.classList.remove('error');
errorMessage.textContent = "";
}
});
document.getElementById('myForm').onsubmit = function(event) {
var username = document.getElementById('username').value;
if (username.length < 5 || username.length > 15) {
alert("Username must be between 5 and 15 characters long");
event.preventDefault(); // 阻止表单提交
}
}
</script>
</body>
</html>
在这个示例中，我们在输入框下面显示错误消息，并使用CSS样式高亮错误输入框。这样可以更直观地引导用户修正错误。
四、使用第三方库进行表单验证
为了简化表单验证，可以使用一些第三方库，如jQuery Validation、Parsley.js等。这些库提供了丰富的验证规则和易于使用的API，可以大大简化表单验证的实现。
1. 使用jQuery Validation
jQuery Validation是一个强大且易于使用的表单验证插件。下面是一个使用jQuery Validation的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.css">
<style>
.error {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="5" maxlength="15">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").validate();
});
</script>
</body>
</html>
在这个示例中，我们使用jQuery Validation插件进行表单验证。只需简单地添加所需的验证规则（如 required、minlength、maxlength 等），并调用 validate() 方法即可实现强大的表单验证功能。
2. 使用Parsley.js
Parsley.js是另一个流行的表单验证库，提供了丰富的验证规则和易于使用的API。下面是一个使用Parsley.js的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<link rel="stylesheet" href="https://parsleyjs.org/src/parsley.css">
<style>
.parsley-errors-list {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required data-parsley-length="[5, 15]">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required data-parsley-type="email">
<br>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://parsleyjs.org/dist/parsley.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").parsley();
});
</script>
</body>
</html>
在这个示例中，我们使用Parsley.js进行表单验证。只需简单地添加所需的验证规则（如 required、data-parsley-length、data-parsley-type 等），并调用 parsley() 方法即可实现强大的表单验证功能。
五、总结
在HTML的
