一、背景在这里插入代码片
背景：
Ant design vue + vue3的项目，后端的数据格式为对象套对象，绑定数据的时候发现，第二次的formItem表单校验没有效果，出现以下问题：
理想场景：输入一部分的必填项，点击确定，表单校验不通过的提示，不请求接口及其后续操作。
实际场景：输入一部分的必填项，点击确定，直接请求新增/编辑接口，然后跳转页面。
技术定位：初级
二、操作步骤
1.复现前的准备工作
（1）vue版本和ant design vue 版本
"ant-design-vue": "^3.2.20",
"vue": "^3.2.33",
1
2
（2）任意页面的代码
如下面代码示例， 对象password.ps1使用表单校验，没有输入任何数据，表单校验仍然通过了
{
{ formState }}
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2.解决问题
当我们使用自定义表单校验后，虽然values里面的值依旧为空，但是通过了表单校验
3.自定义表单校验的代码
{
{ formState }}
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
总结
ant design vue 不支持嵌套表格的表单校验，只能使用自定义表单校验
