Vue3 Vuetify：表单提交保留v-dialog且触发校验的实现方法

要实现提交后弹窗不关闭、校验规则生效、重置输入框并提示成功，你需要结合Vuetify的v-form组件手动控制校验流程，而非依赖默认的submit按钮行为，具体实现如下：

完整代码示例 #

<template>
  <v-dialog persistent max-width="1024" v-model="dialogVisible">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props">打开弹窗</v-btn>
    </template>

    <v-card>
      <v-card-title>表单提交</v-card-title>
      <v-card-text>
        <!-- 用v-form包裹所有表单元素，绑定ref用于手动触发校验 -->
        <v-form ref="form" lazy-validation>
          <v-text-field
            v-model="formData.lastname"
            :rules="nameRules"
            :counter="10"
            label="Last name"
            required
          ></v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <!-- 用普通按钮绑定click事件，执行自定义提交逻辑 -->
        <v-btn @click="handleSubmit" color="primary">提交</v-btn>
        <v-btn @click="dialogVisible = false" color="grey">取消</v-btn>
      </v-card-actions>
    </v-card>

    <!-- 提交成功提示组件 -->
    <v-snackbar v-model="snackbarVisible" timeout="3000">
      提交成功！
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="snackbarVisible = false">关闭</v-btn>
      </template>
    </v-snackbar>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      snackbarVisible: false,
      formData: {
        lastname: ''
      },
      nameRules: [
        v => !!v || '姓氏不能为空',
        v => (v && v.length <= 10) || '姓氏不能超过10个字符'
      ]
    }
  },
  methods: {
    async handleSubmit() {
      // 手动调用表单校验，校验通过返回true
      const isValid = await this.$refs.form.validate()
      if (!isValid) return

      // 这里编写你的实际提交逻辑（比如调用后端接口）
      // await yourSubmitApi(this.formData)

      // 提交成功后：重置表单状态 + 清空输入绑定值 + 显示提示
      this.$refs.form.reset()
      this.formData.lastname = ''
      this.snackbarVisible = true
    }
  }
}
</script>

关键细节说明 #

• v-form的核心作用：通过ref获取表单实例，调用validate()方法手动触发校验，既保留了Vuetify自带的校验规则生效逻辑，又避免了默认submit按钮触发的弹窗关闭行为。
• 自定义提交按钮：按钮不设置type="submit"，通过绑定click事件完全控制提交流程，不会触发浏览器默认的表单提交行为。
• 表单重置逻辑：调用form.reset()会清空输入框的校验状态，再手动重置v-model绑定的值，确保输入框完全恢复初始状态。
• 成功提示：用Vuetify的v-snackbar实现友好的提交反馈，也可以根据需求替换为alert或其他提示组件。

内容的提问来源于stack exchange，提问作者helloworld