FormKit 通过允许您直接在输入项上声明验证规则，使前端验证变得简单。编写自定义规则也很容易，但是有了20多个生产就绪的规则，您很少需要这样做。
声明适用于给定输入的验证规则就像提供一个 validation 属性一样简单。规则可以使用两种语法声明：
可以通过指定每个所需规则名称并用管道 | 分隔来声明验证规则。一些规则也可能接受参数，这些参数可以在冒号 : 后提供。您可以通过逗号分隔它们来使用多个参数：
验证规则也可以通过提供一个数组来声明。数组的每个元素必须是一个数组，其中第一个元素是验证规则的字符串名称，其余的 n 个元素是该规则的参数。
如果提供的参数需要是实际的 JavaScript 类型，这种方法特别有帮助 — 例如，一个正则表达式（regex）：
验证规则始终实时计算 — 这意味着给定字段始终是有效或无效的（在等待异步验证规则运行时被认为是无效的）。然而 — 验证错误的 可见性 是由 validation-visibility 属性决定的。
| 可见性 | 描述 |
|---|---|
| blur | (默认) 用户从输入中移除焦点后显示错误。 |
| live | 错误始终可见。 |
| dirty | 用户修改输入值后显示错误。 |
| submit | 仅在用户尝试提交表单后显示错误。 |
如果输入位于表单内，则在用户尝试提交表单时，将向最终用户显示任何剩余的验证消息。
由于 FormKit 的配置继承，您可以通过使用 config 属性在 form、group 或 list 级别设置 validation-visibility，您仍然可以在每个输入的基础上覆盖它：
验证规则根据一些默认特性运行，您可以通过使用“规则提示”在逐个案例的基础上更改这些特性：
required|length:5，那么在 required 规则通过之前，length 规则不会运行。required 规则是唯一的例外），验证规则不会运行。上述特性可以在声明规则时通过使用“提示”来修改。规则提示是您添加到规则声明开头的小修饰符字符，用以改变其默认行为：
| 提示 | 名称 | 描述 |
|---|---|---|
(200) | 防抖 | 以给定的毫秒数防抖验证规则。 |
+ | 空值 | 即使输入为空也运行验证规则（但不强制规则）。 |
* | 强制 | 即使前一个规则失败也运行验证规则。 |
? | 可选 | 使验证规则变为可选（它是非阻塞的，意味着表单仍然可以提交）。 |
(milli)有时候对验证规则进行防抖是有意义的。要做到这一点，请在您的规则前使用防抖提示 —— 一个包含毫秒数的括号：
检查一个值是否仅包含字母字符。有两种字符集：拉丁文和默认。拉丁文字符严格为 [a-zA-Z]，而默认集包括大多数带重音的字符，如 ä、ù 或 ś。
检查一个值是否仅由字母字符或数字组成。对于字母部分，你可以传递 default 或 latin - 见上面的 alpha。
检查一个值是否仅由字母字符或空格组成。对于字母部分，你可以传递 default 或 latin - 见上面的 alpha。
检查一个数字是否（包括性地）位于另外两个数字之间。输入值必须是一个数字，否则验证规则将失败。
检查一个输入的值是否与另一个输入的值匹配 — 通常用于密码确认。指定要匹配的输入有两种方式：
name 属性后附加 _confirm。name 作为参数传递给第二个输入的确认规则 confirm:name_of_input_1（更具体）。注意：两个输入必须在同一个 group 或 form 中。
检查一个值是否包含字母字符。有两种字符集：拉丁文和默认。拉丁文字符严格为 [a-zA-Z]，而默认集包括大多数带重音的字符，如 ä、ù 或 ś。
检查一个值是否包含字母字符或数字。对于字母部分，你可以传递 default 或 latin - 见上面的 contains alpha。
检查一个值是否包含字母字符或空格。对于字母部分，你可以传递 default 或 latin - 见上面的包含字母。
检查一个值是否包含小写字母。有两个字符集：拉丁文和默认。拉丁字符严格为 [a-zA-Z]，而默认集包括大多数带重音的字符，如 ä、ù 或 ś。
检查一个值是否包含数字。
检查一个值是否包含符号。
检查一个值是否包含大写字母。有两个字符集：拉丁文和默认。拉丁字符严格为 [a-zA-Z]，而默认集包括大多数带重音的字符，如 ä、ù 或 ś。
确定一个日期是否在当前日期或作为规则参数提供的日期之后。使用的日期可以是 JavaScript Date 对象或可以由 Date.parse() 解析的字符串。
确定一个日期是否在当前日期或作为规则参数提供的日期之前。使用的日期可以是 JavaScript Date 对象或可以由 Date.parse() 解析的字符串。
确定一个日期是否在作为规则参数提供的两个日期之间（包括这两个日期）。使用的日期可以是 JavaScript Date 对象或可以由 Date.parse() 解析的字符串。
确保输入的日期格式与特定的日期格式相匹配。格式应使用以下格式化标记来指定：
| 标记 | 有效值 |
|---|---|
| MM | 两位数月份表示（01-12） |
| M | 单位数月份表示（1-12），允许前导零 |
| DD | 两位数月份中的日（01-31） |
| D | 单位数月份中的日（1-31），允许前导零 |
| YY | 两位数年份 |
| YYYY | 四位数年份 |
原生日期输入总是输出相同的格式 YYYY-MM-DD ...，尽管它们根据浏览器的区域设置显示日期。使用这个规则来指定一个不同的格式将导致输入永远无法有效。
检查输入是否包含有效的电子邮件地址。
检查输入的值是否以给定的子字符串结尾。
检查输入的值是否至少与提供的一个参数匹配。
检查输入的值是否超过给定的长度，或者在两个长度值之间。它用于验证数组（如列表）、对象（如组）或字符串长度。也可以用来模拟原生的 maxlength 和 minlength。
检查一个值是否只包含小写字符。有两个字符集：拉丁和默认。拉丁字符严格为 [a-zA-Z]，而默认集包括大多数带重音的字符，如 ä、ù 或 ś。
检查输入是否与特定的值或模式匹配。如果你传递多个参数，它会检查每一个直到找到匹配项。
在验证属性中传递字符串进行简单匹配时，你可以用斜杠 / 模板化你的参数，以传入你自己的正则表达式。
当使用字符串字符串语法时，你不能转义用于定义验证规则本身的字符 (|,:)。要在你的正则表达式中使用这些字符，你必须使用替代的数组语法。
检查一个Number是否小于或等于最大值。默认的最大值是10。
您也可以使用这个规则来验证一个Array的长度是否小于或等于最大值。
检查一个Number是否大于或等于最小值。默认的最小值是1。
您也可以使用这个规则来验证一个Array的长度是否大于或等于最小值。
检查输入数据是否不匹配一组预定义的值。
检查输入是否为isNaN()评估的有效数字。
检查输入是否为空。
如果您不希望空白字符使required规则通过，您可以将trim作为参数传递给规则：
检查多个输入，如果其中任何一个有值，则通过。
注意：两个输入必须在同一个group或form中。
检查输入是否以提供的选项之一开头。
检查一个值是否只包含符号。
检查一个值是否只包含大写字符。有两个字符集：拉丁字符和默认字符集。拉丁字符严格为[a-zA-Z]，而默认字符集包括大多数带重音的字符，如ä、ù或ś。
检查输入值是否看起来是一个格式正确的URL，包括协议。这不检查URL是否实际解析。
验证规则是接受核心节点并返回布尔值的函数 — true 表示通过，false 表示失败。此外，传递给验证规则的任何参数都作为参数 1-n 可用。编写自己的规则很简单 — 例如：
/**
* 文件: my-custom-rules/monday.js
*
* 一个人为的验证规则，确保输入的值是 monday 或 mon。
*/
const monday = function (node) {
return node.value === 'monday' || node.value === 'mon'
}
export default monday
如验证规则提示部分所述，验证规则 — 包括您的自定义规则 — 按照默认行为操作：它们按顺序运行，当输入的值为空时会被跳过，是同步的，并且是阻塞的。如果您希望您的规则的默认操作不同，您可以覆盖这些在您的自定义验证规则上：
/**
* 一个人为的验证规则，确保输入的值是 monday 或 mon。
*/
const monday = function (node) {
return node.value === 'monday' || node.value === 'mon'
}
// 覆盖您的自定义规则的默认规则行为
monday.blocking = false
monday.skipEmpty = false
monday.debounce = 20 // 毫秒
monday.force = true
export default monday
您也可以通过规则提示在特定情况下覆盖这些行为。
一旦您编写了一个验证函数 — 您需要在 FormKit 中注册验证规则 — 无论是全局还是特定于某个输入。
验证规则可以依赖于您的表单树中其他输入的值。为此，请使用节点遍历来定位另一个节点并访问其值：
验证规则应始终是纯函数。只使用传入的参数，并且不执行任何副作用。
要在您的项目中任何地方使用验证规则，您可以在注册 Vue 的 FormKit 插件的任何地方指定它。
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import monday from './my-custom-rules/monday'
// prettier-ignore
createApp(App).use(plugin, defaultConfig({
rules: { monday },
})).mount('#app')
安装后，您可以在项目中的任何地方使用您的验证规则。
<FormKit validation="required|monday" />
要自定义当您的自定义验证失败时显示的错误消息，请按照此处的说明操作。
要为特定输入添加验证，请使用 validation-rules 属性。
您的自定义规则可能需要一个自定义消息 — 下一节文档将会介绍这方面的内容。
有几种方法可以自定义验证消息。最基本的方法是使用 validation-label 属性 — 允许您更改字段在预定义验证消息中的名称。
如果您需要更具体，您有两个选择：
您可以通过在 FormKit 输入上提供一个字符串或函数的对象，直接覆盖验证消息。
要在单个 FormKit 输入上覆盖验证消息，请添加 validation-messages 属性，并带有规则名称和相应消息的对象。
如果您需要为验证规则提供更多能力，您可以使用函数而不是字符串。该函数会传递一个上下文对象。
| 行为 | 描述 |
|---|---|
| args | 传递给规则的参数数组。例如来自规则 is:Vue,React,Angular 的 'Vue', 'React', 'Angular'。 |
| name | 字段的名称（首先从 validation-label、label 然后是 name 中获取）。 |
| node | FormKit 核心 node。 |
让我们使用函数而不是字符串来重写上面的例子，以便对 validation-messages 属性有更多的控制：
如果您想要覆盖（或添加）整个项目中的验证规则消息，您可以在注册 FormKit 时，定义这些消息规则，并放在您想要覆盖的语言键下：
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import monday from './my-custom-rules/monday'
// prettier-ignore
createApp(App).use(plugin, defaultConfig({
messages: {
en: {
validation: {
required({ name }) {
return `请填写${name}字段。`
}
}
}
}
})).mount('#app')
如果您希望在 <FormKit /> 组件之外渲染输入的验证消息，您可以利用 <FormKitMessages /> 组件，并将输入的节点作为属性传递。使用这个组件会禁用消息的默认显示（位于输入下方），并将它们移动到 <FormKitMessages /> 组件所在的位置：
FormKit 1.0.0 引入了 FormKitSummary 组件，它提供了一个“开箱即用”的解决方案，用于显示给定表单或子树中的所有验证消息。
要从 输入的核心节点 获取所有验证消息，您可以使用从 @formkit/validation 导出的 getValidationMessages 函数。这个函数会递归检查给定节点及其所有子节点的验证消息，并返回一个将核心节点映射到验证消息的 Map，这使它非常适合与表单一起使用：