前端表单验证是确保用户输入数据合法性和完整性的关键步骤,以下是一个使用 HTML、CSS 和 JavaScript 实现简单表单验证的示例：
HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">表单验证示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="myForm">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<span class="error-message" id="usernameError"></span>
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<span class="error-message" id="passwordError"></span>
</div>
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>
CSS 样式
/ style.css /
.form-group {
margin-bottom: 15px;
}
.error-message {
color: red;
font-size: 12px;
display: block;
margin-top: 5px;
}
JavaScript 验证逻辑
// script.js
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入值
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();
// 验证用户名
if (username === '') {
showError('usernameError', '用户名不能为空');
} else if (username.length < 3) {
showError('usernameError', '用户名至少需要3个字符');
} else {
clearError('usernameError')
;
}
// 验证邮箱
const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
if (email === '') {
showError('emailError', '邮箱不能为空');
} else if (!emailPattern.test(email)) {
showError('emailError', '请输入有效的邮箱地址');
} else {
clearError('emailError');
}
// 验证密码
if (password === '') {
showError('passwordError', '密码不能为空');
} else if (password.length < 6) {
showError('passwordError', '密码至少需要6个字符');
} else {
clearError('passwordError');
}
// 如果所有验证都通过，则提交表单
if (!document.getElementById('usernameError').textContent &&
!document.getElementById('emailError').textContent &&
!document.getElementById('passwordError').textContent) {
alert('表单验证通过！');
// 这里可以添加实际的表单提交逻辑
// this.submit();
}
});
// 显示错误信息
function showError(elementId, message) {
const errorElement = document.getElementById(elementId);
errorElement.textContent = message;
}
// 清除错误信息
function clearError(elementId) {
const errorElement = document.getElementById(elementId);
errorElement.textContent = '';
}
说明
-
HTML 结构：
- 使用
<form>元素包裹所有输入字段。 - 每个输入字段旁边都有一个
<span>元素用于显示错误信息。
- 使用
-
CSS 样式：
.error-message类用于设置错误信息的样式，使其以红色小字体显示在输入字段下方。
-
JavaScript 验证逻辑：
- 监听表单的
submit事件，阻止默认提交行为。 - 获取每个输入字段的值并进行验证。
- 如果验证失败,显示相应的错误信息；如果验证成功，清除错误信息。
- 如果所有验证都通过,则提示用户表单验证通过，并可以在此处添加实际的表单提交逻辑。
- 监听表单的
注意事项
- 用户体验：确保错误信息清晰明了，帮助用户快速理解并修正错误。
- 安全性：前端验证主要用于提升用户体验，后端仍需进行数据验证以确保数据安全。
- 可扩展性：可以根据需要添加更多的验证规则和更复杂的交互逻辑。
这个示例展示了基本的表单验证流程,你可以根据具体需求进行调整和扩展。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/484952.html
