Vue 在按下回车键和使用验证观察器时阻止表单提交

Posted 2023-02-22

【中文标题】Vue 在按下回车键和使用验证观察器时阻止表单提交

【英文标题】：Vue prevent form submit when pressing enter and using validation-observer

【发布时间】：2022-01-11 21:50:42

【问题描述】：

我有以下代码：

<validation-observer v-slot=" handleSubmit " ref="formValidator">
  <form @submit.prevent>
    <!-- inputs -->
    <button type="submit" @click="handleSubmit(submit)">Save</button>
  </form>
</validation-observer>

我希望@submit.prevent 在表单输入中按下 Enter 键时阻止提交表单，但事实并非如此。

如何防止表单被提交（全局用于所有输入）并在提交前触发验证。

【参考方案1】：

您可以在表单中添加@keydown.enter="$event.preventDefault()"：

  <validation-observer v-slot=" handleSubmit " ref="formValidator">
    <form @submit.prevent  @keydown.enter="$event.preventDefault()">
      <!-- input -->
      <button type="submit" @click="handleSubmit(upsert)">Save</button>
    </form>
  </validation-observer>