Vue使用validation-observer时阻止回车提交表单并触发校验的问题咨询

原有配置未生效的核心原因是：将提交逻辑绑定在了提交按钮的click事件上，部分浏览器在表单输入框按下回车时，会自动触发表单内type="submit"按钮的点击事件，你加的@submit.prevent仅阻止了原生表单的默认跳转行为，没有拦截到按钮点击触发的提交逻辑。

下面分两步实现需求，既全局拦截输入框回车提交，又保留提交前的校验逻辑：

第一步：修正表单绑定逻辑（保障校验正常触发） #

把vee-validate提供的handleSubmit统一绑定到form的submit事件上，所有提交动作统一走这一层，避免逻辑遗漏：

<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
  <form @submit.prevent="handleSubmit(submit)">
    <!-- 各类输入框 -->
    <button type="submit">Save</button>
  </form>
</validation-observer>

修改后点击提交按钮会正常触发submit事件，自动走handleSubmit内置的校验逻辑，校验通过后才会调用你自定义的submit方法。

第二步：全局拦截输入框回车提交 #

两种方案可按需选择：

• 方案1：全局事件监听（适合全项目所有表单都需要拦截回车提交的场景）
  在项目入口文件（比如Vue项目的main.js）中添加全局监听逻辑：

document.addEventListener('keydown', e => {
  // 仅拦截输入框的回车键，排除多行文本框的回车换行需求
  if (
    e.key === 'Enter' 
    && e.target.tagName === 'INPUT' 
    && e.target.type !== 'textarea'
    && e.target.closest('form')
    // 如需放行特定输入框（比如搜索框），可加下一行判断，给对应输入框加allow-enter-submit类即可
    // && !e.target.classList.contains('allow-enter-submit')
  ) {
    e.preventDefault()
  }
})

• 方案2：Vue自定义指令（适合按需给指定表单添加拦截的场景）
  先全局注册自定义指令：

// main.js中注册
Vue.directive('prevent-enter-submit', {
  bind(formEl) {
    formEl.addEventListener('keydown', e => {
      if (
        e.key === 'Enter' 
        && e.target.tagName === 'INPUT' 
        && e.target.type !== 'textarea'
      ) {
        e.preventDefault()
      }
    })
  }
})

需要拦截的表单添加指令即可：

<form @submit.prevent="handleSubmit(submit)" v-prevent-enter-submit>

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