个人网站制作 Part 3 用JS添加高级交互(表单验证、动态内容更新) | Web开发项目

---

‍ 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前两篇博文中，我们创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互和动画效果。

本篇将继续丰富你的网站，为其添加更高级的交互性功能，使用JavaScript进行操作。

使用JavaScript进行交互

表单验证

步骤 1: 添加JavaScript文件

创建一个名为 script.js 的文件，并在其中添加以下代码：

// 获取表单元素
const contactForm = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');

// 添加表单提交事件监听器
contactForm.addEventListener('submit', function (event) {
    // 阻止表单默认提交行为
    event.preventDefault();

    // 调用表单验证函数
    validateForm();
});

// 表单验证函数
function validateForm() {
    // 简单的非空验证
    if (nameInput.value === '' || emailInput.value === '' || messageInput.value === '') {
        alert('请填写所有字段！');
    } else {
        alert('表单提交成功！');
        // 这里可以添加实际的表单提交逻辑
    }
}

步骤 2: 更新表单HTML

在 index.html 文件中的表单元素中添加 novalidate 属性，以禁用浏览器默认的表单验证：

<form id="contactForm" novalidate>
    
form>

动态内容更新

步骤 3: 动态更新项目展示

在 script.js 文件中添加以下代码，用于动态更新项目展示区域的内容：

// 获取项目展示区域
const projectsSection = document.getElementById('projects');

// 模拟项目数据（实际项目中，这些数据可能来自后端）
const projectsData = [
    { title: '项目1', description: '项目1描述', image: 'project1.jpg' },
    { title: '项目2', description: '项目2描述', image: 'project2.jpg' },
    // 添加更多项目数据
];

// 动态生成项目HTML并插入到页面中
projectsData.forEach(project => {
    const projectHTML = `
        

            ${project.image}" alt="${project.title}">
            
${project.title}
            
${project.description}
        
    `;
    projectsSection.insertAdjacentHTML('beforeend', projectHTML);
});

预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有表单验证和动态项目展示的更加交互性的个人网站了！

下一步计划

在下一篇文章中，我们将继续学习如何使用JavaScript添加页面滚动效果和其他高级交互功能。记得继续关注本系列，让你的网站更上一层楼！

通过这个项目，你将逐步深入了解Web开发的不同层面。祝你编码愉快，继续前进！