我是靠谱客的博主 端庄狗，这篇文章主要介绍ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView，现在分享给大家，希望可以做个参考。
老规矩，话不多说，直接上实现方式
注意：本帅用的版本 “antd”: “4.16.13”,
前提代码如下
复制代码
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
27const generateUUID = () => { let d = new Date().getTime(); const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => { const r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16); }); return uuid; }; const arrs = []; for (let i = 20; i--; ) { const uuid = generateUUID(); arrs.push({ label: uuid, name: uuid, key: uuid, }); } const [state, setstate] = useState([]); // setstate(arrs); useEffect(() => { setTimeout(() => { console.log(arrs, 'arrs'); setstate(arrs); }, 200); }, []);
方式一：scrollToFirstError
复制代码
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//首先给Form添加一个属性 scrollToFirstError={true} //然后给button按钮添加属性 htmlType="submit" 即可 //代码如下 <Form form={form} name="basic" scrollToFirstError={true}> <Form.Item id="sadfasf" label="asdfa" name="sadfasf" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> <Form.Item id="aaaa" label="aaaa" name="aaaa" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> {state.map((item) => { return ( <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> ); })} <Button type="primary" htmlType="submit"> Submit </Button> </Form>;
方式二：onFinishFailed
复制代码
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//失败就会触发该方法 //代码如下： <Form form={form} name="basic" onFinishFailed={() => { //关键代码 const errorList = (document as any).querySelectorAll(".ant-form-item-has-error"); //由于校验失败ant会自动给失败表单项添加类名，直接获取即可 errorList[0].scrollIntoView({ block: "center", behavior: "smooth", }); }} //注意：由于dom更新异步，可能会获取不到，可以在setTimeout()中操作，vue的使用nextTick()即可 > <Form.Item id="sadfasf" label="asdfa" name="sadfasf" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> <Form.Item id="aaaa" label="aaaa" name="aaaa" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> {state.map((item) => { return ( <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> ); })} <Button type="primary" htmlType="submit"> Submit </Button> </Form>;
方式三：自定义表单项
很多情况下，表单项是通过接口获取渲染的，页面布局可能是自定义的，或嵌套多层div
复制代码
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
57
58
59
60
61
62
63
64
65
66//类似这种嵌套多层盒子,可能就会失效 {state.map((item) => { return ( <div> <div> <div> <span></span> <div> <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> </div> ); })} //这时候必须要改盒子绑定一定id才会生效 <Form form={form} name="basic" scrollToFirstError={true}> <Form.Item id="sadfasf" label="asdfa" name="sadfasf" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> <Form.Item id="aaaa" label="aaaa" name="aaaa" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password /> </Form.Item> {state.map((item) => { return ( <div id={item.name}> <div> <div> <span></span> <div> <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> </div> ); })} <Button type="primary" htmlType="submit"> Submit </Button> </Form>;
在Tabs遇到的问题
可能有个需求，切换对应的tabs，获取相应的表单列表，那么问题就来了，必填项校验失败后，自动滚到到第一个必填项只在第一个tab中生效，其他的不生效。所以我目前是通过销毁隐藏的dom来解决（destroyInactiveTabPane）
完整代码如下
复制代码
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146<Tabs destroyInactiveTabPane defaultActiveKey="1" onChange={onChange} tabPosition="left"> <TabPane tab="Tab 1" key="1"> <div className={styles.con} id="crfDetailContent"> <Form form={form} name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onFinishFailed={() => { //注意，用方式一也是可以的---scrollToFirstError let str = 'sadfasf'; const errorDom: any = document.getElementById(str); errorDom.scrollIntoView({ block: 'center', behavior: 'smooth', }); }} > {console.log('state', state)} <hr style={{ marginTop: 30 }} /> <div> <div> <div id="sadfasf"> <Form.Item id="sadfasf" label="asdfa" name="sadfasf" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> <div> <Form.Item id="aaaa" label="aaaa" name="aaaa" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> {state.map((item) => { return ( <div> <div> <div> <span></span> <div> <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> </div> ); })} <Button type="primary" htmlType="submit"> Submit </Button> </Form> </div> </TabPane> <TabPane tab="Tab 2" key="2"> <div className={styles.con} id="crfDetailContent"> <Form form={form} name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} // onFinish={onFinish} onFinishFailed={() => { let str = 'sadfasf'; const errorDom: any = document.getElementById(str); errorDom.scrollIntoView({ block: 'center', behavior: 'smooth', }); }} > <hr style={{ marginTop: 30 }} /> <div> <div> <div id="sadfasf"> <Form.Item id="sadfasf" label="asdfa" name="sadfasf" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> <div> <Form.Item id="aaaa" label="aaaa" name="aaaa" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> {state.map((item) => { return ( <div> <div> <div> <span></span> <div> <Form.Item key={item.key} label={item?.label} name={item?.name} rules={[{ required: false, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> </div> </div> </div> </div> ); })} <Button type="primary" htmlType="submit"> Submit </Button> </Form> </div> </TabPane> <TabPane tab="Tab 3" key="3"> Content of Tab Pane 3 </TabPane>
最后
以上就是端庄狗最近收集整理的关于ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView的全部内容，更多相关ant内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复