FormKit：如何进行异步/服务器端验证？

Question

如何使用FormKit（使用 Vue3）进行异步/服务器端验证？不仅在提交时，而且在用户从输入中移除焦点之后。

基本验证示例：

<FormKit
  type="text"
  label="Number"
  validation="required|number|between:20,50"
  validation-visibility="live"
  help="Enter a number between 20 and 50."
/>

除了文档提到一次异步之外，在任何地方都找不到任何示例或提及。

Answer 1

创建自定义异步规则

\n

在 FormKit 中，验证规则只是接受核心节点并返回布尔值 \xe2\x80\x94\xc2\xa0 的函数true，以表示通过验证和false失败：

\n

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

\n

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

\n

将异步规则添加到您的输入中

\n

您可以直接在输入上定义自定义规则<FormKit />，也可以全局定义以在任何输入上使用。对于此解决方案，我们将规则直接放在输入上。

\n

通过 prop 添加自定义规则:validation-rules，这使得 prop 中的任何规则都可用validation。我们可以选择通过:validation-messagesprop 添加自定义验证消息。

\n

<FormKit\n  type="text"\n  label="Pick a username"\n  help="Type \xe2\x80\x9cfoouser\xe2\x80\x9d to pass validation"\n  validation="checkUsername"\n  :validation-rules="rules"\n  :validation-messages="{ checkUsername: \'Your custom message.\' }"\n/>\n

\n

验证

\n

\n

不仅在提交时，而且在用户从输入中移除焦点之后。

\n

\n

FormKit 中的验证实际上是实时发生的。您唯一需要做的就是定义何时向用户显示验证消息，无论是实时 ( validation-visibility="live")、开启blur（默认行为）还是开启submit。这称为验证可见性。

\n

完整的解决方案，改善了用户体验 (UX)

\n

对于异步规则，通常最好向用户显示加载旋转器，以便他们知道操作正在实时发生，并在服务器响应时提供反馈。这是一个完整的例子：

\n

\n
1. 验证规则时显示加载微调器。
\n
2. 如果规则失败，则显示验证消息。
\n
3. 如果验证通过，则显示复选标记。
\n

\n

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

\n

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

\n