HTML required 属性深度解析：理解其与表单提交的内在关联

例如，可以监听按钮的点击事件，然后在事件处理函数中手动检查输入字段的值：

document.addEventListener('DOMContentLoaded', function() {
    const productNameInput = document.getElementById('productName');
    const saveButton = document.querySelector('.container button');

    saveButton.addEventListener('click', function() {
        if (!productNameInput.value.trim()) {
            alert('产品名称是必填项！'); // 简单的提示
            productNameInput.focus();
            // 或者使用更复杂的UI提示，如添加错误类、显示错误信息等
            return; // 阻止后续操作
        }
        // 如果验证通过，执行保存逻辑
        console.log('产品信息已验证，准备保存...');
        // 实际的保存逻辑（例如，通过 AJAX 发送数据）
    });
});

对于更高级的场景，JavaScript 提供了 HTMLInputElement.checkValidity() 和 HTMLInputElement.reportValidity() 方法，它们可以手动触发元素的 HTML5 验证，并显示浏览器默认的验证提示。

document.addEventListener('DOMContentLoaded', function() {
    const productNameInput = document.getElementById('productName');
    const saveButton = document.querySelector('.container button');

    saveButton.addEventListener('click', function() {
        if (!productNameInput.checkValidity()) {
            // 如果验证不通过，reportValidity() 会显示浏览器默认的错误提示
            productNameInput.reportValidity(); 
            return;
        }
        console.log('产品信息已验证，准备保存...');
        // 实际的保存逻辑
    });
});

总结与最佳实践

required 属性是 HTML 提供的一个强大且便捷的客户端验证工具。它的设计哲学是与表单提交行为紧密结合，以提供一种声明式的、浏览器原生的必填字段校验机制。

• 遵循语义化： 始终将 required 属性应用于 标签内的输入字段。这是其设计意图和最佳实践。
• 客户端与服务器端结合： 客户端验证（如 required 属性）是为了提供即时反馈和优化用户体验，但绝不能替代服务器端验证。服务器端验证是数据安全和完整性的最终保障。
• JavaScript 作为补充： 在特殊情况下，如果无法使用
  标签，或者需要更复杂的验证逻辑和自定义错误信息，应使用 JavaScript 来实现自定义验证。