如何在Ant-Design Form提交后滚动到首个校验错误字段？

核心逻辑很简单，校验完成后定位到DOM顺序最靠前的错误字段，调用滚动API将其移动到可视区域即可，以下是不同场景的实现代码：

原生JavaScript实现 #

1. 先完成你现有的表单校验逻辑，给所有校验不通过的输入字段统一加上标记类名（比如is-error）
2. 从所有错误字段中取第一个匹配的元素，调用滚动API定位，代码示例：

// 绑定表单提交事件
const targetForm = document.querySelector('#base-form')
targetForm.addEventListener('submit', function(e) {
  e.preventDefault()
  // 执行你已有的表单校验逻辑，校验失败的字段添加is-error类
  // runYourOwnFormValidate()

  // 获取所有校验失败的字段
  const errorFieldList = document.querySelectorAll('.is-error')
  if (errorFieldList.length === 0) {
    // 无错误，正常提交表单
    // handleFormSubmit()
    return
  }

  // 取第一个错误字段
  const firstErrorField = errorFieldList[0]
  // 无固定顶栏的场景直接用scrollIntoView实现平滑滚动
  firstErrorField.scrollIntoView({
    behavior: 'smooth', // 平滑滚动动画，去掉就是瞬间跳转
    block: 'center' // 将错误字段定位到视口垂直居中位置，也可以设为'start'靠顶部
  })
  // 可选：自动聚焦到错误字段，方便用户直接输入修改
  firstErrorField.focus()
})

适配固定顶部导航栏的场景 #

如果页面有吸顶的导航栏，直接用scrollIntoView可能导致错误字段被导航栏遮挡，此时可以手动计算滚动位置，预留出导航栏高度：

// 替换上面的scrollIntoView逻辑
const fixedNavHeight = 64 // 替换为你页面固定导航的实际高度，单位px
const extraOffset = 16 // 额外留16px的边距，视觉上更舒服
const scrollTargetY = firstErrorField.getBoundingClientRect().top + window.pageYOffset - fixedNavHeight - extraOffset
window.scrollTo({
  top: scrollTargetY,
  behavior: 'smooth'
})

常用UI组件库快捷配置 #

如果你是基于成熟UI组件库开发，不需要自己手动写逻辑，组件已经内置了对应能力：

• Element UI/Element Plus：给<el-form>组件添加scroll-to-error属性，值设为true即可自动滚动到第一个错误字段，还可以通过scroll-into-view-options传入滚动配置适配固定顶栏
• Ant Design/Ant Design Vue：给<a-form>组件添加scrollToFirstError属性，值设为true即可，支持传入滚动配置参数自定义偏移、动画效果
• React Hook Form：可以在handleSubmit的错误回调里拿到errors对象，找到第一个错误字段对应的DOM元素后调用滚动方法即可

内容的提问来源于stack exchange，提问作者Александр