# useValidationAnimation Hook

`useValidationAnimation` 是一个用于表单验证和滚动的 Vue Hook。

## 功能

* **表单验证**：支持传入表单 ref 或 DOM 元素，自动调用表单的 `validate` 方法进行验证。
* **滚动到错误字段**：如果验证失败，自动滚动到第一个无效字段，使其居中显示在视口中。
* **抖动动画**：在无效字段上添加抖动动画，引起用户注意。
* **Promise 支持**：返回一个 Promise，以便在验证和滚动完成后执行其他操作。


## 使用方法

<div class="options-api">

```vue
<script setup>
  import { ref } from 'vue';
  import { useValidationAnimation } from '@ksconsole/hooks';
  import { Form} from '@king-design/vue';


  const formRef = ref(null); // 或者传入需要定位的dom元素
  const { validateAndScroll } = useValidationAnimation(formRef);

  async function handleSubmit() {
    const isValid = await validateAndScroll(formRef);
    if (isValid) {
      // 表单验证通过，继续提交逻辑
    }
  }
</script>

<template>
  <Form ref="formRef" @submit.prevent="handleSubmit">
  </Form>
</template>
```

</div>


## API

### `validateAndScroll(formRefOrDom, options)`

* `formRefOrDom` (required)：表单的 ref 对象或 DOM 元素。
* `options` (optional)：
* `block`：滚动对齐方式，默认为 `'center'`。

**返回值**：一个 Promise，解析为布尔值，表示表单验证是否通过。