如何为v-stepper组件的步骤间添加表单验证？

代码示例 #

当前使用的v-stepper组件结构如下：

<template>
  <v-stepper
    v-model="step"
    :items="items"
  >
    <template v-slot:item.1>
      <v-form>
        //content of step 1
      </v-form>
    </template>

    <template v-slot:item.2>
      <v-form>
        //content of step 2
      </v-form>
    </template>

    <template v-slot:item.3>
      <v-form>
        //content of step 3
      </v-form>
    </template>

  </v-stepper>
</template>

每个步骤通过v-slot:item.n嵌套v-form，可根据需求调整结构。

需求说明 #

需要实现步骤跳转前的表单验证，仅当前步骤所有字段填写完成后，用户才能点击“下一步”。需了解两种实现方式：

1. 自定义按钮，手动触发跳转函数并嵌入验证逻辑；
2. 修改内置v-stepper-actions按钮的行为，保留默认样式的同时添加验证。

已尝试方案 #

曾尝试以下方法但均无效：

• 给v-stepper-actions绑定@click:next等事件，按钮点击无响应；
• 使用旧版文档中的@before-next-step事件，无任何效果；
• 多种v-stepper模板和方法组合均未达到预期。

可行解决方案 #

方法一：自定义操作按钮，完全控制跳转逻辑 #

通过给每个步骤的表单添加引用，自定义按钮点击事件，先验证当前表单再执行跳转。

<template>
  <v-stepper v-model="step" :items="items">
    <!-- 步骤1 -->
    <template v-slot:item.1>
      <v-form ref="step1Form">
        <v-text-field v-model="formData.name" label="姓名" required></v-text-field>
      </v-form>
      <v-stepper-actions>
        <v-btn @click="nextStep(1)" color="primary">下一步</v-btn>
      </v-stepper-actions>
    </template>

    <!-- 步骤2 -->
    <template v-slot:item.2>
      <v-form ref="step2Form">
        <v-text-field v-model="formData.email" label="邮箱" required type="email"></v-text-field>
      </v-form>
      <v-stepper-actions>
        <v-btn @click="prevStep" text>上一步</v-btn>
        <v-btn @click="nextStep(2)" color="primary">下一步</v-btn>
      </v-stepper-actions>
    </template>

    <!-- 步骤3 -->
    <template v-slot:item.3>
      <v-form ref="step3Form">
        <v-text-field v-model="formData.phone" label="电话" required></v-text-field>
      </v-form>
      <v-stepper-actions>
        <v-btn @click="prevStep" text>上一步</v-btn>
        <v-btn @click="submitForm" color="success">提交</v-btn>
      </v-stepper-actions>
    </template>
  </v-stepper>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
const formData = ref({
  name: '',
  email: '',
  phone: ''
})
// 存储各步骤表单引用
const step1Form = ref(null)
const step2Form = ref(null)
const step3Form = ref(null)

// 下一步逻辑：先验证当前步骤表单，通过则跳转
const nextStep = async (currentStep) => {
  let isValid = false
  switch(currentStep) {
    case 1:
      isValid = await step1Form.value.validate()
      break
    case 2:
      isValid = await step2Form.value.validate()
      break
  }
  if (isValid) step.value += 1
}

// 返回上一步
const prevStep = () => {
  if (step.value > 1) step.value -= 1
}

// 提交逻辑
const submitForm = async () => {
  const isValid = await step3Form.value.validate()
  if (isValid) {
    console.log('提交成功', formData.value)
    // 此处添加实际提交逻辑
  }
}
</script>

优势：完全自定义按钮样式、位置和逻辑，每个步骤的验证规则可单独配置，灵活度高。

方法二：修改内置v-stepper-actions的行为 #

保留Vuetify内置操作按钮的样式，通过监听step变化事件拦截跳转，仅验证通过时允许跳转到下一步。

<template>
  <v-stepper 
    v-model="step" 
    :items="items"
    @update:model-value="handleStepChange"
  >
    <template v-slot:item.1>
      <v-form ref="step1Form">
        <v-text-field v-model="formData.name" label="姓名" required></v-text-field>
      </v-form>
    </template>

    <template v-slot:item.2>
      <v-form ref="step2Form">
        <v-text-field v-model="formData.email" label="邮箱" required type="email"></v-text-field>
      </v-form>
    </template>

    <template v-slot:item.3>
      <v-form ref="step3Form">
        <v-text-field v-model="formData.phone" label="电话" required></v-text-field>
      </v-form>
    </template>

    <!-- 替换内置操作按钮，保留样式并添加逻辑 -->
    <template v-slot:actions>
      <v-stepper-actions>
        <v-btn text @click="step > 1 && (step -= 1)">上一步</v-btn>
        <v-btn 
          color="primary" 
          @click="step < items.length && (step += 1)"
        >
          {{ step === items.length ? '提交' : '下一步' }}
        </v-btn>
      </v-stepper-actions>
    </template>
  </v-stepper>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
const items = ref([{title:'步骤1'},{title:'步骤2'},{title:'步骤3'}])
const formData = ref({name:'', email:'', phone:''})
const step1Form = ref(null)
const step2Form = ref(null)
const step3Form = ref(null)

// 拦截step变化事件，仅验证通过时允许跳转到下一步
const handleStepChange = async (newStep) => {
  // 仅当跳转到更高阶步骤时验证（即点击下一步）
  if (newStep > step.value) {
    let isValid = false
    switch(step.value) {
      case 1:
        isValid = await step1Form.value.validate()
        break
      case 2:
        isValid = await step2Form.value.validate()
        break
    }
    // 验证不通过则阻止step更新
    if (!isValid) return
  }
  // 返回上一步或验证通过，更新step
  step.value = newStep
}

// 提交逻辑（可选，也可在handleStepChange中处理）
const submitForm = async () => {
  const isValid = await step3Form.value.validate()
  if (isValid) {
    console.log('提交成功', formData.value)
  }
}
</script>

优势：保留Vuetify默认组件样式，无需自定义按钮布局，符合组件设计规范，仅拦截下一步操作，返回上一步无需验证。

之前尝试失败的原因 #

1. Vuetify 3已移除旧版的@before-next-step事件，该事件仅适用于Vuetify 2及更早版本；
2. v-stepper-actions本身未暴露@click:next等事件，直接绑定无效，需手动处理按钮的点击逻辑。

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