项目说明
本项目通过HTML、CSS和JavaScript实现网页表单验证功能，验证用户输入的姓名和邮箱地址是否符合格式要求。输入输出格式清晰，验证结果可显示，无需依赖第三方库，并在3天内完成实现。
背景介绍
在网页开发中，表单验证功能是确保数据质量的重要环节。通过本项目，我们可以实现以下功能：
- 验证姓名和邮箱的格式
- 显示验证结果信息
- 实现输入输出验证逻辑
思路分析
- HTML结构
使用两个输入框分别输入姓名和邮箱，通过按钮触发验证逻辑。 -
CSS样式
显示验证结果，并保持界面简洁，避免额外样式干扰。 -
JavaScript验证逻辑
- 验证邮箱是否包含@符号
- 验证邮箱的域名是否有效
- 显示验证结果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表单验证</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h2>姓名验证</h2>
<input type="text" id="name" placeholder="请输入姓名" />
<h2>邮箱验证</h2>
<input type="email" id="email" placeholder="请输入邮箱地址" />
<button onclick="checkForm()">验证</button>
<div id="result"></div>
<script>
function checkForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// 验证邮箱
if (!email.includes('@')) {
alert("邮箱必须包含@符号");
return;
}
// 验证邮箱的域名是否有效
const re = /^([a-z0-9\+_%-]+(\.[a-z0-9\+_%-]+))(\d{2,4})$/;
if (!re.test(email)) {
alert("邮箱格式错误");
}
// 显示结果
document.getElementById('result').textContent = '姓名有效，邮箱格式正确.';
}
</script>
</body>
</html>
总结
本项目通过HTML、CSS和JavaScript实现网页表单验证功能，验证了姓名和邮箱的格式，展示结果清晰，验证逻辑简单且有效。该实现满足项目要求，可以在3天内完成，并具备良好的可运行性和代码规范。通过这种方式，用户可以方便地验证输入数据的质量，提升数据处理的准确性。