Vue3中FormKit异步/服务端验证实现方法（含失焦触发）

1. 定义异步验证函数 #

先编写模拟服务端验证的异步函数，通过Promise返回验证结果：

// 模拟服务端接口，检查用户名是否已被注册
const validateUsername = async (value, node) => {
  // 若值为空，交由required规则处理，直接返回
  if (!value) return;
  
  try {
    // 替换为实际的服务端请求地址
    const res = await fetch(`/api/check-username?name=${encodeURIComponent(value)}`);
    const result = await res.json();
    
    if (result.isExist) {
      // 验证失败，返回错误提示
      return Promise.reject("该用户名已被注册");
    }
    // 验证成功
    return Promise.resolve();
  } catch (err) {
    // 请求失败时的错误提示
    return Promise.reject("验证请求失败，请稍后重试");
  }
};

2. 绑定到FormKit组件并配置触发时机 #

在FormKit组件中，通过validation-function传入自定义异步验证，同时配置validation-triggers指定验证触发场景（失去焦点blur + 表单提交submit），可混合内置规则使用：

<template>
  <FormKit
    type="text"
    label="用户名"
    placeholder="请输入用户名"
    validation="required"
    :validation-function="validateUsername"
    :validation-triggers="['blur', 'submit']"
    validation-visibility="blur"
    help="用户名长度需在3-16位，且未被注册"
  />
</template>

<script setup>
import { FormKit } from '@formkit/vue';

// 放入上面定义的validateUsername函数
const validateUsername = async (value, node) => {
  if (!value) return;
  
  try {
    const res = await fetch(`/api/check-username?name=${encodeURIComponent(value)}`);
    const result = await res.json();
    
    if (result.isExist) {
      return Promise.reject("该用户名已被注册");
    }
    return Promise.resolve();
  } catch (err) {
    return Promise.reject("验证请求失败，请稍后重试");
  }
};
</script>

3. 全局注册异步验证规则（可选） #

如果需要在多个组件中复用该验证逻辑，可通过FormKit的扩展能力全局注册规则：

// 在main.js或FormKit配置文件中
import { createApp } from 'vue';
import { createFormKit } from '@formkit/vue';
import { defaultConfig } from '@formkit/vue';

const app = createApp(App);

// 注册全局自定义异步验证规则
const customConfig = defaultConfig({
  rules: {
    uniqueUsername: async (value) => {
      if (!value) return;
      const res = await fetch(`/api/check-username?name=${encodeURIComponent(value)}`);
      const result = await res.json();
      if (result.isExist) {
        return Promise.reject("该用户名已被注册");
      }
      return Promise.resolve();
    }
  }
});

app.use(createFormKit(customConfig));
app.mount('#app');

注册后，可直接在组件的validation字符串中引用规则：

<FormKit
  type="text"
  label="用户名"
  validation="required|uniqueUsername"
  :validation-triggers="['blur', 'submit']"
  validation-visibility="blur"
  help="用户名长度需在3-16位，且未被注册"
/>

关键配置说明 #

• validation-function：接收异步函数，用于自定义验证逻辑，参数为输入值和FormKit节点对象
• validation-triggers：数组类型，指定触发验证的事件，可选值包括blur、input、submit等，设置['blur', 'submit']可满足需求
• validation-visibility：控制错误信息的显示时机，设置为blur时，失去焦点后才显示错误；若设置为live则实时显示

内容的提问来源于stack exchange，提问作者TheStoryCoder