问题现象

在 Next.js 项目的 form 表单中，点击按钮时会意外触发表单中其他元素的 e.target.reportValidity() 方法，导致浏览器显示 HTML5 表单验证错误提示。

问题根因

1. 按钮默认行为

• HTML 中的 <button> 元素默认 type="submit"
• 在表单内的按钮被点击时会触发表单提交

2. 表单验证机制

• 表单提交时，浏览器自动验证所有带验证属性的元素
• 验证失败时，浏览器内部调用 reportValidity() 显示错误信息