<docs>
---
order: 5
title:
zh-CN: 嵌套结构与校验信息
en-US: Nest
## zh-CN
`name` 属性支持嵌套数据结构。通过 `validateMessages` 或 `message` 自定义校验信息模板，模板内容可参考[此处](https://github.com/vueComponent/ant-design-vue/blob/main/components/form/utils/messages.ts)。
## en-US
`name` prop support nest data structure. Customize validate message template with `validateMessages` or `message`. Ref [here](https://github.com/vueComponent/ant-design-vue/blob/main/components/form/utils/messages.ts) about message template.
</docs>
<template>
<a-form
:model="formState"
v-bind="layout"
name="nest-messages"
:validate-messages="validateMessages"
@finish="onFinish"
>
<a-form-item :name="['user', 'name']" label="Name" :rules="[{ required: true }]">
<a-input v-model:value="formState.user.name" />
</a-form-item>
<a-form-item :name="['user', 'email']" label="Email" :rules="[{ type: 'email' }]">
<a-input v-model:value="formState.user.email" />
<a-form-item :name="['user', 'age']" label="Age" :rules="[{ type: 'number', min: 0, max: 99 }]">
<a-input-number v-model:value="formState.user.age" />
<a-form-item :name="['user', 'website']" label="Website">
<a-input v-model:value="formState.user.website" />
<a-form-item :name="['user', 'introduction']" label="Introduction">
<a-textarea v-model:value="formState.user.introduction" />
<a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const validateMessages = {
required: '${label} is required!',
types: {
email: '${label} is not a valid email!',
number: '${label} is not a valid number!',
},
number: {
range: '${label} must be between ${min} and ${max}',
const formState = reactive({
user: {
name: '',
age: undefined,
email: '',
website: '',
introduction: '',
});
const onFinish = (values: any) => {
console.log('Success:', values);
</script>
