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

这篇具有很好参考价值的文章主要介绍了个人网站制作 Part 3 用JS添加高级交互(表单验证、动态内容更新) | Web开发项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

🚀 使用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 = `
        <div class="project">
            <img src="${project.image}" alt="${project.title}">
            <h3>${project.title}</h3>
            <p>${project.description}</p>
        </div>
    `;
    projectsSection.insertAdjacentHTML('beforeend', projectHTML);
});