对象验证规则会按照对象的属性依次验证，直到设置的属性都完成验证。示例中会先验证省份选择器，选择省份后会继续验证城市，然后是地址。

<template>
  <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="formData.name" clearable placeholder="请输入活动名称" />
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-col :span="7">
        <el-select v-model="formData.region.province" clearable placeholder="请选择省份">
          <el-option label="省份一" value="1" />
          <el-option label="省份二" value="2" />
        </el-select>
      </el-col>
      <el-col :span="1" style="text-align: center">
        <span>-</span>
      </el-col>
      <el-col :span="7">
        <el-select v-model="formData.region.city" clearable placeholder="请选择城市">
          <el-option label="城市一" value="1" />
          <el-option label="城市二" value="2" />
        </el-select>
      </el-col>
      <el-col :span="1" style="text-align: center">
        <span>-</span>
      </el-col>
      <el-col :span="8">
        <el-input v-model="formData.region.street" clearable placeholder="请填写地址" />
      </el-col>
    </el-form-item>
    <el-form-item label=" ">
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()
const formData = ref({
  name: '',
  region: {
    province: '',
    city: '',
    street: '',
  },
})
const formRules = ref<FormRules>({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  region: [
    {
      type: 'object',
      required: true,
      trigger: 'change',
      fields: {
        province: { required: true, message: '请选择省份' },
        city: { required: true, message: '请选择城市' },
        street: { required: true, message: '请填写地址' },
      },
    },
  ],
})

const submitForm = () => {
  formRef.value?.validate((valid, fields) => {
    if (!valid) {
      console.log('error submit!', fields)
    } else {
      console.log({ ...formData.value })
    }
  })
}

const resetForm = () => {
  formRef.value?.resetFields()
}
</script>

相关资料

• element-ui Form表单验证规则全解