diff --git a/docs/developer-guide/form-schema.md b/docs/developer-guide/form-schema.md index 06f8126..744114a 100644 --- a/docs/developer-guide/form-schema.md +++ b/docs/developer-guide/form-schema.md @@ -67,6 +67,83 @@ spec: 除了 FormKit 官方提供的常用输入组件之外,Halo 还额外提供了一些输入组件,这些输入组件可以在 Form Schema 中使用。 +### verificationForm + +#### 描述 + +用于远程验证一组数据是否符合要求的组件。 + +#### 参数 + +- `action`:对目标数据进行验证的接口地址 +- `label`:验证按钮文本 +- `submitAttrs`:验证按钮的额外属性 + +#### 示例 + +```yaml +- $formkit: verificationForm + action: /apis/console.api.halo.run/v1alpha1/verify/verify-password + label: 账户校验 + children: + - $formkit: text + label: "用户名" + name: username + validation: required + - $formkit: password + label: "密码" + name: password + validation: required +``` + +:::tip +尽管 `verificationForm` 本身是一个输入组件,但与其他输入组件不同的是,它仅仅用于包装待验证的数据,所以并不会破坏原始数据的格式。例如上述示例中的值在保存后为: + +```json +{ + "username": "admin", + "password": "admin" +} +``` + +而不是 + +```json +{ + "verificationForm": { + "username": "admin", + "password": "admin" + } +} +``` + +::: + +示例中发送至验证地址的值为如下格式: + +```json +{ + "username": "admin", + "password": "admin" +} +``` + +当验证接口返回成功响应时,则验证通过,否则验证失败。 + +若用户在验证失败时想显示错误信息,可以在验证接口返回错误信息,该错误信息的结构定义需遵循 [RFC 7807 - Problem Details for HTTP APIs](https://datatracker.ietf.org/doc/html/rfc7807.html) 。例如: + +```json +{ + "title": "无效凭据", + "status": 401, + "detail": "用户名或密码错误。" +} +``` + +UI 效果: + + + ### repeater #### 描述 diff --git a/static/img/formkit/formkit-verify-form.png b/static/img/formkit/formkit-verify-form.png new file mode 100644 index 0000000..b03ca15 Binary files /dev/null and b/static/img/formkit/formkit-verify-form.png differ