如何将自定义验证规则应用于 FormKit 架构？

Question

我正在尝试使用 FormKit 架构应用自定义验证规则。我可以让正常的 formkit 组件毫无问题地工作。然而，当尝试使用 FormKit 架构时，它不起作用。

这是一个示例：https://formkit.link/28c461b2b93f6d2c50d23debc37c276b

提前致谢。

您可以在链接上看到我想要实现的目标。

Answer 1

如果您使用 FormKit 架构来定义输入，则需要使用

:data

元素上的

FormKitSchema

绑定属性将自定义验证规则传递到架构元素中。

FormKit 游乐场：https://formkit.link/10d9045f7cf8510fbc7ac0c26895f02d

例如：

<script setup>
function day(node, group = 'weekdays') {
  const dayNames = [
    'monday',
    'mon',
    'tuesday',
    'tue',
    'wednesday',
    'wed',
    'thursday',
    'thu',
    'friday',
    'fri',
    'saturday',
    'sat',
    'sunday',
    'sun',
  ]
  const value = node.value.toLowerCase()
  switch (group) {
    case 'weekdays':
      return dayNames.slice(0, 10).includes(value)
    case 'weekend':
      return dayNames.slice(10).includes(value)
    default:
      return dayNames.includes(value).includes(value)
  }
}

const schema = {
  $formkit: 'text',
  label: 'Weekend day',
  validation: 'day:weekend',
  validationRules: '$validationRules',
  validationVisibility: 'live',
  help: 'Enter a weekend day.'
};

const data = {
  validationRules: { day }
}
</script>

<template>
  <FormKitSchema :schema="schema" :data="data" />
</template>