高级表单指南

欢迎使用 Finch 高级表单指南！本指南将引导您完成在 Finch 应用程序中创建高级表单的步骤。无论您是经验丰富的开发人员还是刚刚起步，Finch 都提供了一套强大的工具来简化服务器端 Web 应用程序开发。

什么是高级表单？

Finch 中的高级表单是一种创建具有验证和错误处理的复杂表单的方法。它们基于 AdvancedForm 类。此类提供了一种简单的方法来创建具有验证和错误处理的表单。您可以使用此类创建具有多个字段的表单，每个字段都有自己的验证规则。

它从请求中读取数据并根据验证规则进行验证。它还提供了一种在视图中渲染表单的方法。您可以使用此类创建用于用户注册、登录、个人资料更新等的表单。

使用高级表单

要在 Finch 应用程序中使用高级表单，您需要创建一个扩展 AdvancedForm 类的类。此类应实现 fields 方法，该方法返回 Field 对象列表。每个 Field 对象表示表单中的一个字段及其验证规则。

以下是如何为用户注册创建高级表单的示例：

class UserRegistrationForm extends AdvancedForm {
  @override
  String get widget => 'forms/registration.j2.html';

  @override
  String get name => 'form_example';

  @override
  List<Field> fields() {
    return [
      csrf(),
      Field('name', validators: [
        FieldValidator.requiredField(),
        FieldValidator.fieldLength(min: 3),
      ]),
      Field('email', validators: [
        FieldValidator.requiredField(),
        FieldValidator.isEmailField(),
      ]),
      Field('password', validators: [
        FieldValidator.requiredField(),
        FieldValidator.isPasswordField(),
      ]),
    ];
  }
}

在上面的示例中，我们创建了一个包含三个字段的表单：name、email 和 password。每个字段都有自己的验证规则。csrf() 方法用于向表单添加 CSRF 令牌。这是一种防止跨站请求伪造攻击的安全措施。csrf() 方法由 AdvancedForm 类提供。

渲染表单

要在视图中渲染表单，可以使用 AdvancedForm 类提供的 render 方法。此方法返回可以在视图中渲染的字符串。您可以在视图中使用此字符串来渲染表单。

var form = UserRegistrationForm();
var formHtml = await form.render();
rq.addParam('form', formHtml);
return rq.renderView(path: 'user/registration.j2.html');

在上面的示例中，我们创建了 UserRegistrationForm 类的实例。然后我们调用 render 方法来获取表单的 HTML 字符串。我们将此字符串添加到键为 form 的请求参数中。最后，我们渲染视图 user/registration.j2.html，它将渲染表单。

验证表单

要验证表单，可以使用 AdvancedForm 类提供的 check 方法。此方法根据验证规则验证表单数据并返回布尔值。如果表单有效，则返回 true。否则，返回 false。

var form = UserRegistrationForm();
var isValid = await form.check();
if (isValid) {
  // 处理有效的表单数据
} else {
  // 处理验证错误
}

在上面的示例中，我们创建了 UserRegistrationForm 类的实例。然后我们调用 check 方法来验证表单数据。如果表单有效，我们可以处理表单数据。否则，我们可以处理验证错误。

API 响应

这种表单将返回包含表单数据和验证错误的 json 响应。您可以使用此数据在视图中渲染表单。您还可以使用此数据在视图中处理验证错误。高级表单通过 url 中的 /api/ 检测 API 请求，它将返回 json 响应。

在视图中渲染表单

要在视图中渲染表单，可以在模板中使用以下代码：

{% include form_example.widget | unscape %}

模板示例

<form method="POST" action="/example/person/{{ (data._id) if data._id else '' }}" class="space-y-8">
    <input
        type="text"
        name="name"
        required
        value="{{ $n('form_example/name/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/name/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/name/errors/0') else 'hidden' }}">{{ $n('form_example/name/errors/0') }}</div>
    <input
        type="email"
        name="email"
        required
        value="{{ $n('form_example/email/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/email/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/email/errors/0') else 'hidden' }}">{{ $n('form_example/email/errors/0') }}</div>
    <input
        type="password"
        name="password"
        required
        value="{{ $n('form_example/password/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/password/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/password/errors/0') else 'hidden' }}">{{ $n('form_example/password/errors/0') }}</div>
    
    <!-- CSRF Token -->
    <input type="hidden" name="token" value="{{ $n('form_example/token/value') }}" />
    <div class="mt-1 text-[10px] text-rose-600 {{ $n('form_example/token/errors/0') ? '' : 'hidden' }}">{{ $n('form_example/token/errors/0') }}</div>

    <button type="submit" class="wave inline-flex h-9 items-center rounded-md border border-primary-600 bg-primary-50 px-3 text-xs font-medium text-primary-700 hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-500/30">{{ $t('database.table.button.add') }}</button>
</form>

本页内容