用 FormKit 架构实现自定义验证：打造精准无误的表单

2024-03-17 06:31:51

如何用 FormKit 架构实现自定义验证

背景

FormKit 是一个 React 库，简化了表单的创建和验证。它的架构功能允许你定义表单结构并应用自定义验证规则。本文将指导你完成这一过程，确保你的表单收集有效且准确的数据。

步骤指南

1. 定义架构

创建包含表单字段和验证规则的对象来定义架构。例如，要验证用户名和密码：

const schema = {
  fields: [
    {
      name: 'username',
      validators: [
        { type: 'required', message: '用户名不能为空' },
        { type: 'minLength', args: [6], message: '用户名至少需 6 个字符' }
      ]
    },
    {
      name: 'password',
      validators: [
        { type: 'required', message: '密码不能为空' },
        { type: 'minLength', args: [8], message: '密码至少需 8 个字符' }
      ]
    }
  ]
};

2. 创建 FormKit 表单

使用 useForm Hook 并传入架构来创建表单：

const form = useForm({ schema });

3. 处理表单提交

在表单提交时，FormKit 会根据架构验证输入。如果验证失败，它将显示错误消息。

示例

以下是应用自定义验证规则的示例：

// 架构
const schema = { ... };

// 表单
const form = useForm({ schema });

// 表单提交处理程序
const handleSubmit = (e) => {
  e.preventDefault();
  const isValid = form.validate();
  if (isValid) {
    // 表单已通过验证，提交表单
  } else {
    // 表单未通过验证，显示错误消息
  }
};