---

前言

提示：

---

一、背景在这里插入代码片

• 背景：
  • Ant design vue + vue3的项目，后端的数据格式为对象套对象，绑定数据的时候发现，第二次的formItem表单校验没有效果，出现以下问题：
  • 理想场景：输入一部分的必填项，点击确定，表单校验不通过的提示，不请求接口及其后续操作。
  • 实际场景：输入一部分的必填项，点击确定，直接请求新增/编辑接口，然后跳转页面。
• 技术定位：初级

二、操作步骤

1.复现前的准备工作

（1）vue版本和ant design vue 版本

javascript">"ant-design-vue": "^3.2.20",
"vue": "^3.2.33",

（2）任意页面的代码

如下面代码示例， 对象password.ps1使用表单校验，没有输入任何数据，表单校验仍然通过了

<template><div>{{ formState }}</div><Form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"><FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]"><Input v-model:value="formState.username" /></FormItem><FormItem label="Password" name="password.ps1":rules="[{ required: true, message: 'Please input your username!' }]"><InputPassword v-model:value="formState.password.ps1" /></FormItem> {{ formState.password.ps1 }}<FormItem :wrapper-col="{ offset: 8, span: 16 }"><Button type="primary" html-type="submit">Submit</Button></FormItem></Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { Form, FormItem, Input, InputPassword, Button } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form';
interface objpasType {ps1: string,ps2: string,
}
interface FormStateType {username: string;password: objpasType;remember: boolean;
}
const rules: Record<string, Rule[]> = {username: [{ required: true, message: '请输入', trigger: 'change' }],'password.ps1': [{ required: true, message: '请输入', trigger: 'change' }],
}
const formState = reactive<FormStateType>({username: '',password: {ps1: '',ps2: '',},remember: true,
});
const onFinish = (values: any) => {console.log('Success:', values);
};const onFinishFailed = (errorInfo: any) => {console.log('Failed:', errorInfo);
};
</script>

2.解决问题

当我们使用自定义表单校验后，虽然values里面的值依旧为空，但是通过了表单校验

3.自定义表单校验的代码

javascript"><template><div>{{ formState }}</div><Form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"><FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]"><Input v-model:value="formState.username" /></FormItem><FormItem label="Password" name="password.ps1":rules="[{ required: true, validator: (rules) => checkSchedulingCycle(rules, formState.password.ps1), }]"><InputPassword v-model:value="formState.password.ps1" /></FormItem> {{ formState.password.ps1 }}<FormItem :wrapper-col="{ offset: 8, span: 16 }"><Button type="primary" html-type="submit">Submit</Button></FormItem></Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { Form, FormItem, Input, InputPassword, Button } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form';
interface objpasType {ps1: string,ps2: string,
}
interface FormStateType {username: string;password: objpasType;remember: boolean;
}
// const rules: Record<string, Rule[]> = {
//   username: [{ required: true, message: '请输入', trigger: 'change' }],
//   'password.ps1': [{ required: true, message: '请输入', trigger: 'change' }],
// }
const checkSchedulingCycle = async (_rule: Rule, value: any) => {console.log('rules', value)if (!value) return Promise.reject('ps1不能为空');return Promise.resolve();
};
const formState = reactive<FormStateType>({username: '',password: {ps1: '',ps2: '',},remember: true,
});
const onFinish = (values: any) => {console.log('Success:', values);
};const onFinishFailed = (errorInfo: any) => {console.log('Failed:', errorInfo);
};
</script>

---

总结

ant design vue 不支持嵌套表格的表单校验，只能使用自定义表单校验