FormKit 通过让您直接在输入框上声明验证规则，简化了前端验证。编写自定义规则也很容易，但有 20 多个生产就绪规则，您很少需要这样做。
声明哪些验证规则适用于给定输入框非常简单，只需提供一个 validation 属性。规则可以使用两种语法声明：
可以通过指定用竖线 | 分隔的每个所需规则名称来声明验证规则。某些规则还可以接受参数，可以在冒号 : 之后提供。您可以通过逗号分隔它们来使用多个参数：
验证规则还可以通过提供数组来声明。数组的每个元素本身必须是一个数组，其中第一个元素是验证规则的字符串名称，其余的 n 个元素是该规则的参数。
如果提供的参数需要是实际的 JavaScript 类型，这尤其有用 — 例如，正则表达式（regex）：
验证规则始终实时计算 — 这意味着给定字段始终是有效或无效的（在运行挂起的异步验证规则时被视为无效）。然而 — 验证错误的 可见性 是由 validation-visibility 属性决定的。
| 可见性 | 描述 |
|---|---|
| blur | (默认) 用户从输入框中移除焦点后显示错误。 |
| live | 错误始终可见。 |
| dirty | 用户修改输入框的值后显示错误。 |
| submit | 用户尝试提交表单后显示错误。 |
如果输入框位于 表单 内，则在用户尝试提交表单时，将向最终用户显示任何剩余的验证消息。
由于 FormKit 的配置继承，您可以通过使用 config 属性在 form、group 或 list 级别设置 validation-visibility，并且仍然可以在逐个输入的基础上覆盖它：
验证规则根据一些默认特性进行操作，您可以使用 "规则提示" 在逐个案例的基础上更改这些特性：
required|length:5，那么 length 规则将不会运行，直到 required 规则通过。required 规则是唯一的例外）。您可以在声明规则时使用 "提示" 来修改上述特性。规则提示是您附加到规则声明开头的小修饰符字符，以更改其默认行为：
| 提示 | 名称 | 描述 |
|---|---|---|
(200) | 防抖 | 通过给定的毫秒数对验证规则进行防抖。 |
+ | 空 | 即使输入为空，也会运行验证规则（但不是强制规则）。 |
* | 强制 | 即使先前的规则失败，也会运行验证规则。 |
? | 可选 | 使验证规则变为可选（它是非阻塞的，意味着表单仍然可以提交）。 |
(milli)有时候，对验证规则进行防抖是有意义的。要做到这一点，请在规则之前使用防抖提示 —— 一个包含毫秒持续时间的括号：
+有时候，即使输入为空，您也希望验证规则运行。您可以使用空 + 提示来实现这一点：
*强制提示确保验证规则将在其之前定义的规则失败时运行（注意：这并不意味着它会在输入为空时运行）。注意这个例子将显示 两个 length 和 email 消息：
?可选提示允许失败的验证规则不阻止表单提交。在这个例子中，注意如果 required 或 confirm 规则失败，表单将不会提交，但如果带有可选提示的 length 规则失败，表单将会提交：
您可以将规则提示一起使用。要这样做，只需在规则声明之前放置多个提示：required|*+(200)min:10。
FormKit 附带了 20 多个生产就绪的验证规则，涵盖了大部分验证需求。如果您没有找到符合您确切要求的规则，您可以添加一个自定义规则来满足您的需求。
值必须是 yes、on、1 或 true。对于复选框输入很有用 —— 通常在这里需要验证是否接受了条款。
检查一个值是否只包含字母字符。有两个字符集：拉丁和默认。拉丁字符严格为[a-zA-Z]，而默认集包括大多数带重音的字符，如ä、ù或ś。
检查一个值是否只由字母字符或数字组成。对于字母部分，您可以传递default或latin - 请参阅上面的alpha。
检查一个值是否只由字母字符或空格组成。对于字母部分，您可以传递default或latin - 请参阅上面的alpha。
检查一个数字是否（包含）在另外两个数字之间。输入值必须是一个数字，否则验证规则将失败。
检查一个输入的值是否与另一个输入的值匹配 - 通常用于密码确认。有两种方法可以指定要匹配的输入：
_confirm附加到第二个输入的name属性。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]，而默认集包括大多数带有重音的字符，如 ä、ù 或 ś。
检查输入是否与特定值或模式匹配。如果传递多个参数，它将检查每个参数，直到找到匹配项。
在验证属性中传递字符串进行简单匹配时，您可以使用斜杠 / 模板化您的参数以传递您自己的正则表达式。
在使用字符串 String Syntax 时，您不能转义用于定义验证规则本身的字符 (|,:)。要在正则表达式中使用这些字符，您必须使用替代的 Array Syntax。
检查一个Number是否小于或等于最大值。默认的最大值为10。
您还可以使用此规则验证Array的长度是否小于或等于最大值。
检查一个Number是否大于或等于最小值。默认的最小值为1。
您还可以使用此规则验证Array的长度是否大于或等于最小值。
检查输入数据是否与一组预定义值不匹配。
检查输入是否为isNaN()评估的有效数字。
检查输入是否为空。
如果您不希望空格导致required规则通过，您可以将trim作为参数传递给规则：
检查多个输入，如果其中任何一个有值，则通过。
检查输入是否以提供的选项之一开始。
检查一个值是否仅由符号组成。
检查一个值是否仅由大写字符组成。有两个字符集：拉丁和默认。拉丁字符严格为[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 `Please fill out the ${name} field.`
}
}
}
}
})).mount('#app')如果您希望在 <FormKit /> 组件之外呈现输入的验证消息，您可以通过将输入的节点作为 prop 传递来利用 <FormKitMessages /> 组件。使用此组件会禁用消息的默认显示（位于输入框下方），并将它们移动到 <FormKitMessages /> 组件所在的位置：
要从输入的核心节点获取所有验证消息，您可以使用从 @formkit/validation 导出的 getValidationMessages 函数。此函数将递归检查给定节点及其所有子节点的验证消息，并返回核心节点到验证消息的映射，使其非常适合与表单一起使用：