背景介绍
随着用户输入信息的增多，Web应用的验证功能越来越重要。本项目旨在实现一个小型Web应用，用户可输入姓名和邮箱信息，系统验证并保存数据，最终生成包含姓名的HTML表格。通过该实现，用户不仅学到HTML、CSS和JavaScript的基础功能，还能掌握文件读写和数据存储的核心技巧。
思路分析
- HTML表单结构
项目的核心是表单验证功能，用户需填写姓名和邮箱。表单通过HTML的<form>标签实现，其中包含两个输入框。验证邮箱格式是关键，需使用JavaScript实现。 -
邮箱验证逻辑
邮箱验证采用正则表达式，例如^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$，确保输入的邮箱符合标准格式。验证函数需返回布尔值，若失败则显示提示信息。 -
数据存储机制
项目使用字典（如{name: '张三', email: 'zhangsan@example.com'}）存储用户信息，方便后续读取和处理。
代码实现
HTML部分
<!DOCTYPE html>
<html>
<head>
<title>姓名与邮箱验证表单</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
border: 1px solid #ccc;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div>
<h2>姓名与邮箱验证表单</h2>
<form id="validateForm">
<label>姓名：</label><input type="text" id="nameInput" placeholder="请输入姓名" required>
<br>
<label>邮箱：</label><input type="email" id="emailInput" placeholder="请输入邮箱地址" required>
<br>
<button type="submit">保存信息</button>
</form>
</div>
<script>
let name = document.getElementById('nameInput').value;
let email = document.getElementById('emailInput').value;
function validateEmail(email) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return regex.test(email);
}
document.getElementById('saveBtn').addEventListener('click', () => {
if (!validateEmail(email)) {
alert('请输入有效的邮箱地址！');
return;
}
alert('信息保存成功！');
document.getElementById('name').value = name;
document.getElementById('email').value = email;
document.getElementById('result').innerText = '姓名: ' + name + '<br>邮箱: ' + email;
});
</script>
<table>
<tr><th>姓名</th></tr>
<tr><td id="name">张三</td></tr>
</table>
</body>
</html>
JavaScript验证与数据存储
- 邮箱验证函数：使用正则表达式检查邮箱格式，若无效则提示用户。
- 数据存储：通过
document.getElementById读取输入值，并存储到变量中，便于后续验证和输出。
总结
本项目通过HTML、CSS和JavaScript实现了用户输入信息的验证与保存功能。关键点包括：
1. 表单验证逻辑的实现，确保邮箱格式正确；
2. 数据存储机制，帮助后续操作；
3. 文件读写功能的简单应用。
该项目的学习价值在于掌握基础的Web开发技能，包括前端界面、表单验证和数据处理。通过实际开发，开发者不仅提升了自己的编程能力，还能深入理解前端开发的核心逻辑。
可运行代码：
将上述HTML代码复制到终端，运行后可看到验证结果。
附注：
– 本项目使用了HTML5的input元素和JavaScript验证邮箱，确保代码可读性与可执行性。
– 数据存储通过变量管理，便于后续调试或扩展功能。