立即学习“Java免费学习笔记（深入）”；

当用户尝试提交表单（无论是通过点击提交按钮、按下回车键等），浏览器会首先执行所有HTML5的内置验证（包括required属性、pattern属性等）。

• 如果任何验证失败，浏览器会阻止submit事件的触发，并显示相应的错误提示。
• 只有当所有内置验证都通过时，submit事件才会被触发。此时，我们可以在事件处理函数中使用e.preventDefault()来阻止表单的默认提交行为（通常是页面刷新），然后执行我们的自定义JavaScript逻辑。

这种方式确保了HTML5的内置验证始终是第一道防线，同时允许我们完全控制表单通过验证后的数据处理流程。

DreamGen

一个AI驱动的角色扮演和故事写作的平台

下载

3.1 HTML结构示例

我们使用一个简单的注册表单作为示例。

  

    
注册
  
  

    

      

      

      

      

      

      

    
    
  
  

3.2 JavaScript实现：监听submit事件

以下是使用submit事件监听器处理表单提交的优化JavaScript代码。它不仅解决了required属性的问题，还展示了如何高效地收集表单数据。

// users数组用于存储注册用户数据
const users = [];
// 获取用于显示消息的元素
const messageDisplay = document.getElementById("msg");
// 获取表单元素
const registrationForm = document.querySelector(".join-form");
// 获取显示内容的容器，用于提交后更新UI
const contentContainer = document.querySelector(".rightside-content");

// 监听表单的submit事件
registrationForm.addEventListener("submit", (event) => {
    // 阻止表单的默认提交行为（即页面刷新）
    event.preventDefault();

    // 创建一个空对象来存储当前用户的数据
    let currentUser = {};

    // 获取表单中所有带有name属性的输入框（包括input, select, textarea）
    // 并将它们的name和value组合成键值对
    // Object.fromEntries() 可以将键值对数组转换为对象
    // [...event.target.querySelectorAll("input[name]")] 收集所有带有name属性的input元素
    // .map(input => [input.name, input.value]) 将每个input转换为 [name, value] 数组
    currentUser = Object.fromEntries(
        [...event.target.querySelectorAll("input[name]")]
            .map(input => [input.name, input.value])
    );

    // 将当前用户数据添加到users数组
    users.push(currentUser);

    // 打印用户列表到控制台，用于调试
    console.log("当前注册用户列表:", users);

    // 更新页面UI，显示感谢信息
    contentContainer.innerHTML = `
        

            
感谢您的加入，${currentUser.fullname || currentUser.username}！
        
        

            您的信息已成功提交。
        
    `;
    contentContainer.style.fontSize = '1.5rem';
    contentContainer.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
    contentContainer.style.textAlign = 'center';
    contentContainer.style.marginTop = '50%';
});

// 简单的CSS样式，使列表项垂直排列
// 注意：这部分通常放在单独的.css文件中
const style = document.createElement('style');
style.textContent = `
    .join-form ul {
        list-style: none;
        padding: 0;
    }
    .join-form li {
        margin-bottom: 10px;
    }
    .join-form input {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
    }
`;
document.head.appendChild(style);

4. 优化与最佳实践

• 数据获取： 在上述示例中，我们使用了Object.fromEntries()和querySelectorAll()来高效地收集表单数据。对于更复杂的表单，可以考虑使用FormData API，它能更方便地处理各种类型的表单数据，包括文件上传。

  // 使用 FormData API 获取表单数据
  registrationForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const formData = new FormData(event.target); // event.target 就是表单元素
      const currentUser = Object.fromEntries(formData.entries());
      // ... 后续处理
  });

• 错误处理与用户反馈： 尽管HTML5内置验证提供了基础的错误提示，但我们可以通过JavaScript实现更美观、更友好的自定义错误信息。例如，当验证失败时，在相应的输入框下方显示错误文本。提交成功后，提供清晰的成功反馈，如显示感谢消息或重定向到其他页面。

• 分离关注点： 保持HTML、CSS和JavaScript的职责分离。HTML负责结构，CSS负责样式，JavaScript负责行为。避免在JavaScript中直接操作大量样式（如element.style.marginTop = '50%'），而是通过添加/移除CSS类来控制样式。

5. 注意事项

• DOM加载时机： 确保你的JavaScript代码在DOM完全加载后执行。将