Skip to content

Commit

Permalink
docs: add formkit verfiyForm documentation (#327)
Browse files Browse the repository at this point in the history
为 FormKit Schema 文档添加 verifyForm 的内容。相关改动查看 halo-dev/halo#5464

/kind documentation

```release-note
None
```
  • Loading branch information
LIlGG authored Mar 27, 2024
1 parent 3922a17 commit 64b30fa
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 0 deletions.
77 changes: 77 additions & 0 deletions docs/developer-guide/form-schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 效果:

<img src="/img/formkit/formkit-verify-form.png" width="50%" />

### repeater

#### 描述
Expand Down
Binary file added static/img/formkit/formkit-verify-form.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 64b30fa

Please sign in to comment.