创建自定义异步规则

在FormKit中，验证规则只是接受核心节点并返回布尔值的函数-true表示通过验证，false表示失败：

const rules = {
  async checkUsername ({ value }) {
    return new Promise((r) => setTimeout(() => r(value === 'foouser'), 500))
  }
}

如果用户输入foouser作为用户名，上面的checkUsername异步规则将通过验证。请注意，规则被 Package 在rules对象中，允许您定义任意数量的规则。

• 将异步规则添加到输入中 *

您可以直接在<FormKit />输入上定义自定义规则，也可以在任何输入上全局定义自定义规则。对于这个解决方案，我们将直接将规则放在输入上。
通过:validation-rules prop 添加您的自定义规则，这使得validation prop 中的任何规则可用。我们可以选择通过:validation-messages prop添加自定义验证消息。

<FormKit
  type="text"
  label="Pick a username"
  help="Type “foouser” to pass validation"
  validation="checkUsername"
  :validation-rules="rules"
  :validation-messages="{ checkUsername: 'Your custom message.' }"
/>

• 验证 *

不仅在提交时，而且在用户从输入中移除焦点之后。
FormKit中的验证实际上是实时发生的。您唯一需要做的就是定义 when 来向用户显示验证消息，无论是实时的（validation-visibility="live"）、blur上的（默认行为）还是submit上的。这被称为验证可见性。

*完整的解决方案，改善了用户体验（UX）

对于异步规则，通常最好向用户显示加载微调器，以便他们知道操作正在真实的发生，并在服务器响应时提供反馈。下面是一个完整的例子：
1.在验证规则时显示加载微调器。
1.显示规则失败时的验证消息。
1.如果验证通过，则显示复选标记。

完整解决方案：https://formkit.link/9741f666840a11954233982ee189ab43

• 注意：* 在这个人为的例子中，后端只是被模拟了。