如何在Vuetify中验证含多内部表单组件的自定义表单组件

核心思路 #

要让自定义组件适配Vuetify表单验证体系，需要实现两个核心逻辑：

1. 接收并执行父组件传入的联合验证规则
2. 向Vuetify表单暴露验证方法，同时统一展示错误信息

自定义组件代码（MyTextArea.vue） #

<script setup>
import { ref, watch } from 'vue'
const model = defineModel()
const props = defineProps({
  rules: {
    type: Array,
    default: () => []
  }
})

// 存储验证错误信息
const errors = ref([])

// 执行验证的核心函数
const validate = () => {
  errors.value = []
  // 遍历所有规则逐一校验
  props.rules.forEach(rule => {
    const result = rule(model.value)
    // 规则返回非true时，记录错误提示
    if (result !== true) {
      errors.value.push(result || '验证失败')
    }
  })
  // 返回最终验证结果
  return errors.value.length === 0
}

// 深度监听model变化，自动触发验证
watch(model, validate, { deep: true })

// 暴露验证方法给父表单调用
defineExpose({ validate })
</script>

<template>
  <div>
    <v-textarea label="field a" v-model="model.a"></v-textarea><br/>
    <v-textarea label="field b" v-model="model.b"></v-textarea>
    <!-- 使用Vuetify原生组件展示错误 -->
    <v-messages :value="errors" class="mt-2 text-red-500"></v-messages>
  </div>
</template>

父组件使用示例 #

<template>
  <v-form ref="formRef" @submit.prevent="onSubmit">
    <MyTextArea 
      v-model="formData" 
      :rules="[
        // 核心规则：必须且仅需填写其中一个字段
        value => !!value.a !== !!value.b || '必须且仅需填写A或B中的一个',
        // 可添加更多自定义规则
        value => (!value.a || value.a.length <= 50) || '字段A长度不能超过50字符'
      ]" 
    />
    <v-btn type="submit" class="mt-4">提交</v-btn>
  </v-form>
</template>

<script setup>
import { ref } from 'vue'
import MyTextArea from './MyTextArea.vue'

const formData = ref({ a: '', b: '' })
const formRef = ref(null)

const onSubmit = async () => {
  // 触发表单整体验证
  const isValid = await formRef.value.validate()
  if (isValid) {
    console.log('验证通过，提交数据：', formData.value)
    // 此处添加业务提交逻辑
  }
}
</script>

关键细节说明 #

• 规则函数设计：每个规则函数接收整个model对象作为参数，返回true表示验证通过，返回字符串则作为错误提示信息。
• 自动验证：通过watch深度监听model的变化，字段内容修改时自动触发验证，和Vuetify原生组件行为一致。
• 表单集成：自定义组件暴露validate方法，Vuetify的v-form会自动调用该方法完成整体表单验证。
• 错误展示：使用Vuetify的v-messages组件统一错误样式，保持和原生表单组件的视觉一致性。

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