表单校验场景，如何实现页面滚动到报错位置

剪刀石头布啊2026-04-14 21:38

前端的表单校验场景，如何实现页面滚动到指定报错位置呢，现实是我们可能直接使用antd的执行api直接就校验滚动到相应位置，但要是让我们自己实现，会怎么实现呢，虽然这只是一个小功能，但也小小得考验一下我们思路了

实现步骤：

校验表单，并获取报错表单的信息
根据报错表单的id等信息获取到表单dom
直接使用scrollIntoView等滚动到置顶dom的方法就可以滚动到置顶的dom了
如果是多页签，则直接切换到报错的页签并滚动到指定的位置就行了

js 复制代码

import React from "react";
import { Button, Form, Input } from "antd";

const App = () => {
  const form = Form.useForm();
  //生成默认表单，有利于滚动
  const forms = Array.from({ length: 100 }, (v, k) =>
    (k + "").padStart(3, "0")
  );

  //处理根据错误信息的name，处理滚动到指定节点
  const formErrorHandle = () => {
    form.current
      .validateFields()
      .then((res) => {
        console.log("values", res);
      })
      .catch((err) => {
        const errform = err.errorFields;
        if (errform) {
          const first = errform[0];
          const name = first.name[0];
          const item = form.current.getFieldInstance(name);
          item.nativeElement.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      });
  };

  return (
    <div>
      <Button onClick={formErrorHandle}>提交</Button>
      <Form ref={form}>
        {forms.map((item, index) => (
          <Form.Item
            name={item}
            label={item}
            key={index}
            rules={[
              {
                required: index === 80,
              },
            ]}
          >
            <Input />
          </Form.Item>
        ))}
      </Form>
    </div>
  );
};
export default App;

这就是 antd已经提供的方法了，如果项目中非要自定义不适用antd的话，有自己的思路就行，别管实现的优雅不优雅，实现功能才是关键，然后才是借鉴和优化😄

js 复制代码

校验 + 自动滚动到第一个错误字段
form.validateFieldsAndScroll()
validateFields({ scrollToFirstError: true })：