如何为FormKit schema应用自定义验证规则？

核心原因 #

FormKit Schema 基于 JSON 格式定义，无法直接传递函数类型的自定义验证规则——这是它和常规FormKit组件的核心差异，常规组件可以直接绑定函数，而Schema只能通过特定方式引用验证逻辑。

可行解决方案 #

方法1：注册全局自定义验证器 #

在项目初始化时把验证规则注册为全局验证器，之后就能在Schema里直接通过名称引用：

import { createApp } from 'vue'
import { createFormKit } from '@formkit/vue'
import { defaultConfig } from '@formkit/vue'

// 定义你的自定义验证逻辑
const customCheck = ({ value }) => {
  return value.includes('valid') ? true : '输入内容必须包含"valid"'
}

const app = createApp(App)
const formKit = createFormKit(defaultConfig({
  // 注册全局验证器
  validators: {
    customCheck
  }
}))

app.use(formKit)
app.mount('#app')

Schema中直接调用验证器名称：

const schema = {
  type: 'text',
  name: 'testField',
  validation: 'customCheck'
}

方法2：通过props注入验证函数 #

如果不想全局注册，可在渲染Schema时通过组件props注入验证函数，再在Schema中通过$validator访问：

<template>
  <FormKit :schema="schema" :props="{ customCheck }" />
</template>

<script setup>
import { ref } from 'vue'

const customCheck = ({ value }) => {
  return value.length >= 6 ? true : '输入长度不能少于6位'
}

const schema = {
  type: 'password',
  name: 'userPwd',
  validation: '$validator.customCheck'
}
</script>

方法3：直接在validate字段写表达式（仅支持简单同步验证） #

如果验证逻辑足够简单，可直接在Schema的validate字段中写字符串形式的表达式，FormKit会自动解析执行：

const schema = {
  type: 'number',
  name: 'age',
  validate: 'value >= 18 ? true : '必须年满18岁''
}

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