如何阻止表单误触错误按钮提交，仅指定提交按钮生效

这个异常是HTML表单的默认行为导致的：

• 位于<form>标签内的<button>元素如果不显式指定type属性，默认值就是type="submit"，会被浏览器识别为表单提交触发元素
• 用户在表单输入框按下回车键时，浏览器会自动触发表单内第一个提交类型按钮的点击事件，如果你的「忘记密码」按钮在提交按钮之前，就会被优先触发，而非你指定的提交按钮。

推荐按优先级选择以下方案：

• 给「忘记密码」按钮显式添加type="button"属性，让它不再被识别为提交触发元素，回车时就会自动匹配你设置的type="submit"的提交按钮。
  示例修改：

  <!-- 修改前 -->
  <button onclick="跳转忘记密码逻辑">忘记密码</button>
  <!-- 修改后 -->
  <button type="button" onclick="跳转忘记密码逻辑">忘记密码</button>
  

• 如果不方便修改按钮属性，可以给表单绑定回车事件监听，手动拦截回车行为触发提交逻辑：

  const form = document.querySelector('你的表单选择器')
  form.addEventListener('keydown', e => {
    // 匹配回车键
    if (e.key === 'Enter' || e.keyCode === 13) {
      e.preventDefault()
      // 调用你的表单提交方法
      handleFormSubmit()
    }
  })
  

• 不推荐方案：调整按钮顺序把提交按钮放在最前，会影响页面UI布局，适配成本高。

内容的提问来源于stack exchange，提问作者incredible123