Vue无表单分步校验困惑：子组件输入校验与父组件按钮联动方案

针对你这种父组件控制步骤切换、子组件承载表单字段的场景，有两种可行的校验方案，各有适用场景，具体如下：

方案一：子组件自行实现校验 #

适合表单逻辑简单、字段不多的场景，代码轻量易维护。

实现步骤： #

1. 子组件添加校验方法
   每个子组件里写对应的校验逻辑，返回校验结果，同时在组件内显示错误提示。比如StepOne组件：

<template>
  <div class="col-sm-3">
    <label for="customer">Nome do cliente *</label>
    <input
      name="customer_name"
      class="form-control"
      :class="{ 'is-invalid': hasError }"
      id="customerName" 
      type="text"
      v-model="customer.name"
    />
    <div class="invalid-feedback" v-if="hasError">请输入客户名称</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customer: { name: '' },
      hasError: false
    }
  },
  methods: {
    validate() {
      this.hasError = !this.customer.name.trim()
      return !this.hasError
    }
  }
}
</script>

2. 父组件修改切换逻辑
   父组件的下一步按钮点击时，先调用当前步骤子组件的validate方法，校验通过再切换步骤：

<template>
  <!-- 步骤组件和导航保持不变 -->
  <div class="row justify-content-center">
    <div class="col-sm-3 text-center mt-4 d-flex justify-content-around">
      <button type="button" @click="step--" key="back" v-if="step > 1" class="px-4 py-2 rounded btn-add">Anterior</button>
      <button type="button" @click="handleNext" key="next" v-if="step < 5" class="px-4 py-2 rounded btn-add">Próximo</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 1
    }
  },
  methods: {
    handleNext() {
      const currentStepComponent = this.$refs[`step${this.step}`]
      if (currentStepComponent.validate()) {
        this.step++
      }
    }
  }
}
</script>

方案二：使用校验库（以VeeValidate为例） #

适合字段多、校验规则复杂（比如邮箱格式、手机号验证、长度限制等）的场景，能减少重复代码，支持实时校验、自定义错误信息等功能。

实现步骤： #

1. 安装并配置VeeValidate
   先安装依赖：

npm install vee-validate@next @vee-validate/rules

在项目入口文件（比如main.js）配置：

import { createApp } from 'vue'
import { Field, Form, ErrorMessage, defineRule, configure } from 'vee-validate'
import { required } from '@vee-validate/rules'

// 注册规则
defineRule('required', required)

// 配置默认错误信息
configure({
  generateMessage: context => {
    const messages = {
      required: '此字段为必填项'
    }
    return messages[context.rule.name] || '输入无效'
  }
})

const app = createApp(App)
app.component('Field', Field)
app.component('Form', Form)
app.component('ErrorMessage', ErrorMessage)
app.mount('#app')

2. 子组件中使用校验规则
   StepOne组件改造：

<template>
  <Form ref="form">
    <div class="col-sm-3">
      <label for="customer">Nome do cliente *</label>
      <Field
        name="customer_name"
        class="form-control"
        :class="{ 'is-invalid': errors.has('customer_name') }"
        id="customerName" 
        type="text"
        v-model="customer.name"
        rules="required"
      />
      <ErrorMessage name="customer_name" class="invalid-feedback" />
    </div>
  </Form>
</template>

<script>
export default {
  data() {
    return {
      customer: { name: '' }
    }
  },
  methods: {
    async validate() {
      const { valid } = await this.$refs.form.validate()
      return valid
    }
  }
}
</script>

3. 父组件调用校验逻辑
   和方案一的父组件逻辑一致，点击下一步时调用子组件的validate方法，通过后切换步骤即可。

方案选择建议 #

• 如果表单字段少、规则简单，选自行校验，代码更简洁，不需要额外依赖。
• 如果表单复杂、规则多（比如涉及格式验证、联动校验），选校验库，能大幅减少重复代码，提升开发效率，且校验逻辑更规范。

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