Vue.js Vuetify快速失败不会阻止发送表单

发布于09月29日

Vutify FAST Fail判断并显示错误消息，但表格仍会发送.

<script setup>

  import { ref } from "vue"
  
  const firstName = ref('')
  const firstNameRules = [
    value => {
      if (value?.length > 3) return true
      return 'First name must be at least 3 characters.'
    }
  ]
   
  function submit() {
    alert(`${firstName}`)  
  }
 
</script>

<template>
  <v-form fast-fail @submit.prevent="submit">
      <v-text-field
        v-model="firstName"
        label="First name"
        :rules="firstNameRules"
      ></v-text-field>
      </v-form>
</template>

提交函数始终运行，即使显示错误也是如此.如何使差错判断防止表单被提交？

推荐答案

:fast-fail属性在判断失败时停止验证(与始终验证所有输入的默认行为不同).它与提交或提交事件无关.

相反，@submit处理程序收到SubmitEventPromise，这是与Promise合并的常规提交事件.您可以等待验证结果的promise ，并在验证失败时中止提交:

async function submit(submitEventPromise) {
  const { valid, errors } = await submitEventPromise
  if (!valid) {
    return // abort submit
  }
  ... // perform submit
}

这是一张playground元的