vue3+ant design vue实现表单验证失败后，自动滚动到失败的位置（scrollToField）

炒毛豆2025-12-02 12:36

一、背景：当表单验证失败后，需求是需要自动定位到失败的位置

二、技术点：这里需要用到antd的scrollToField

三、代码实现

javascript 复制代码

<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    layout="vertical"
    style="max-width: 500px;"
  >
    <a-form-item label="姓名" name="name">
      <a-input v-model:value="formState.name" placeholder="请输入姓名" />
    </a-form-item>

    <a-form-item label="邮箱" name="email">
      <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
    </a-form-item>

    <a-form-item label="地址" name="address">
      <a-textarea v-model:value="formState.address" placeholder="请输入地址" :rows="4" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formRef = ref();

const formState = reactive({
  name: '',
  email: '',
  address: ''
});

const rules = {
  name: [{ required: true, message: '请输入姓名' }],
  email: [{ required: true, message: '请输入邮箱' }],
  address: [{ required: true, message: '请输入地址' }]
};

// 滚动到第一个错误字段
const scrollToFirstErrorField = (error) => {
  if (error.errorFields?.[0]?.name?.[0]) {
    const fieldName = error.errorFields[0].name[0];
    formRef.value?.scrollToField?.(fieldName, {
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    });
  }
};

const handleSubmit = async () => {
  try {
    // 直接使用 formRef 的 validate 方法
    await formRef.value.validate();
    console.log('提交成功', formState);
  } catch (error) {
    console.log('验证失败');
    scrollToFirstErrorField(error);
  }
};
</script>

四、常见错误：formref.value.scrolltofield is not a function

上面的代码实现是在antd写的，可能不会报这个错误，但是企业中很多会基于antd进行封装，此时有时就会报这个错误。此时首先需要考虑的是formref.value有无暴露scrolltofield方法？因为很多的建议都是说是antd的版本过低导致的，比如我的项目是3.5的版本但是很多说scrolltofield是4.0之上才有的。所以我们先确定是否暴露出来。