按回车键并使用验证观察者时 Vue 阻止表单提交
Vue prevent form submit when pressing enter and using validation-observer
我有以下代码:
<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 键时提交表单,但事实并非如此。
如何防止表单被提交(全局所有输入)并在提交前触发验证。
您可以在表单中添加 @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>
我有以下代码:
<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 键时提交表单,但事实并非如此。
如何防止表单被提交(全局所有输入)并在提交前触发验证。
您可以在表单中添加 @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>