前言：后台管理系统大量表单中，填写表单提交的时候会有各种校验，类似下图

 一。当提交时，会触发a-form的validateFields方法,该方法用于判断是否校验通过，该方法返回一个promise，如果校验通过会进入到then方法，不通过会进入到catch方法，同时会传出来一个error

  /**
   * @method 表单校验
   * @returns  Promise<Record<string, any> | errorMessageArrayType>
   */
  async function formValidateFields(): Promise<Record<string, any> | errorMessageArrayType> {
    return new Promise<Record<string, any> | errorMessageArrayType>(async (resolve, reject) => {
      try {
        await formRef.value.validateFields()
        resolve(formState.value)
      } catch (error: any) {
        reject(error)
      }
    })
  }

二。打印error发现，是这种数据结构，errorFields里面存了表单对应的name和rules，我们想实现的是根据errorFileds里面的errors信息 结合antd的message错误提醒用户，效果如下图

 三。在validateFields方法的catch里，我们只需要遍历errorFields数组，再去遍历errorFields里面erros，同时每次遍历的时候使用message去错误提示即可，代码如下

  /**
   * @method 表单校验
   * @returns  Promise<Record<string, any> | errorMessageArrayType>
   */
  async function formValidateFields(): Promise<Record<string, any> | errorMessageArrayType> {
    return new Promise<Record<string, any> | errorMessageArrayType>(async (resolve, reject) => {
      try {
        await formRef.value.validateFields()
        resolve(formState.value)
      } catch (error: any) {
        const { errorFields } = error
        for (const item of errorFields) {
          if (item?.errors?.length) {
            for (const v of item.errors) {
              globalProperties.$message.error(v)
              // 此处加return是为了按顺序提示
              return
            }
          }
        }
        reject(error)
      }
    })
  }

四。把该方法抽成一个hooks，代码如下

目录：src/hooks/useErrorMessage.ts


import { getCurrentInstance } from 'vue'
import type { errorMessageArrayType } from '@/type/interface/errorMessage'

export default function useErrorMessage() {
  const {
    appContext: {
      config: { globalProperties },
    },
  }: any = getCurrentInstance()

  /**
   * @method 表单必填项校验失败时使用error提示必填
   * @param errorArray 必填字段与name等
   */
  function alertError(errorArray: errorMessageArrayType) {
    const { errorFields } = errorArray
    for (const item of errorFields) {
      if (item?.errors?.length) {
        for (const v of item.errors) {
          globalProperties.$message.error(v)
          // 此处加return是为了按顺序提示
          return
        }
      }
    }
  }

  return {
    alertError,
  }
}

使用时代码如下：在  xx.vue里

<a-button type="primary" @click="handleSave"> 保存 </a-button>


import useErrorMessage from '@/hooks/useErrorMessage'
const { alertError } = useErrorMessage()

/**
 * @method 保存新增
 */
async function handleSave() {
  try {
    // 校验表单正则
    const formState = await wavesRuleFromRef.value.formValidateFields()
  } catch (error: any) {
    console.log('error', error)
    alertError(error)
  }
}