按回车键并使用验证观察者时 Vue 阻止表单提交

Question

我有以下代码：

<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 键时提交表单，但事实并非如此。

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

Answer 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>

按回车键并使用验证观察者时 Vue 阻止表单提交

Vue prevent form submit when pressing enter and using validation-observer

vue.js

preventdefault

vee-validate