代码之家 › 专栏 › 技术社区 › Developer

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

fast-fail vuetify.js error-handling vue.js forms

0

Developer · 技术社区 · 2 年前

Vuetify快速失败检查并显示错误消息,但表单仍会发送。

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

函数submit始终运行,即使显示了错误。如何使错误检查阻止表单提交?

1 回复 | 直到 2 年前

1

0

Moritz Ringler 2 年前

这个 :fast-fail 当检查失败时,prop停止验证(与默认行为相反,默认行为总是验证所有输入)。它与提交或提交事件无关。

相反 @submit 处理程序接收 SubmitEventPromise ,这是一个与promise合并的常规提交事件。您可以等待验证结果的承诺,如果验证失败,则可以中止提交:

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

它在一个 playground