项目说明
本项目使用HTML、CSS和JavaScript实现，前端验证逻辑基于简单数据验证规则，核心技术点为表单数据验证。输入输出示例清晰可见，项目可独立运行。
技术思路
本项目的核心逻辑是验证用户输入的三个字段是否符合格式要求：
– 姓名：请输入真实姓名
– 年龄：请输入数字
– 邮箱：请输入有效邮箱
验证逻辑基于以下规则：
1. 验证姓名是否为字符串，年龄是否为数字，邮箱是否符合正则表达式。
2. 通过DOM元素实时更新验证结果，避免冗余代码。
3. 输出结果以HTML展示，直观清晰。
代码实现
1. HTML表单结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.result {
margin-top: 10px;
}
input, label {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>网页表单验证</h2>
<form id="validateForm">
<label for="name">姓名：</label><input type="text" id="name" name="name" required><br>
<label for="age">年龄：</label><input type="number" id="age" name="age" min="1" max="100" required><br>
<label for="email">邮箱：</label><input type="email" id="email" name="email" required><br>
<button type="submit">提交</button>
</form>
<div class="result">
<h3>验证结果</h3>
<span id="nameResult">姓名：*</span><br>
<span id="ageResult">年龄：*</span><br>
<span id="emailResult">邮箱：*</span>
</div>
<script>
let validateForm = document.getElementById('validateForm');
let nameInput = document.getElementById('name');
let ageInput = document.getElementById('age');
let emailInput = document.getElementById('email');
let resultDiv = document.getElementById('result');
function validateFields() {
const name = nameInput.value.trim();
const age = ageInput.value;
const email = emailInput.value;
const isValid = {
name: /^[a-zA-Z]+$/,
age: /^\d+$/,
email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/g
};
if (isValid.name.test(name)) {
resultDiv.innerHTML = `
<span id="nameResult">姓名：有效</span>
<span id="ageResult">年龄：*请输入数字*</span>
<span id="emailResult">邮箱：*请输入有效邮箱*</span>
`;
} else {
resultDiv.innerHTML = `
<span id="nameResult">姓名：无效</span>
<span id="ageResult">年龄：*请输入数字*</span>
<span id="emailResult">邮箱：*请输入有效邮箱*</span>
`;
}
if (isValid.age.test(age)) {
resultDiv.innerHTML = `
<span id="nameResult">姓名：有效</span>
<span id="ageResult">年龄：有效</span>
<span id="emailResult">邮箱：*请输入有效邮箱*</span>
`;
} else {
resultDiv.innerHTML = `
<span id="nameResult">姓名：无效</span>
<span id="ageResult">年龄：无效</span>
<span id="emailResult">邮箱：*请输入有效邮箱*</span>
`;
}
if (isValid.email.test(email)) {
resultDiv.innerHTML = `
<span id="nameResult">姓名：有效</span>
<span id="ageResult">年龄：有效</span>
<span id="emailResult">邮箱：有效</span>
`;
} else {
resultDiv.innerHTML = `
<span id="nameResult">姓名：无效</span>
<span id="ageResult">年龄：无效</span>
<span id="emailResult">邮箱：无效</span>
`;
}
}
validateForm.addEventListener('submit', () => {
validateFields();
});
</script>
</body>
</html>
2. 项目总结
本项目通过HTML表单实现前端验证逻辑，结合JavaScript实现验证结果的实时更新。验证逻辑验证用户输入的三个字段是否符合格式要求，并通过DOM元素动态展示验证结果，确保用户清晰直观地看到验证结果。
项目实现时间为1-3天，符合Web开发基础的要求，专注于数据验证，避免了重复内容。