Formily 如何进行表单验证

news2025/2/11 1:22:35

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

Formily 是一个基于 JSON Schema 的表单配置化方案，它可以帮助开发者快速构建和管理表单。Formily 提供了强大的表单验证功能，使得开发者可以轻松地定义和执行验证规则。本文将详细介绍 Formily 是如何进行表单验证的。

1. 定义验证规则

在 Formily 中，我们可以通过在 JSON Schema 中定义验证规则来进行表单验证。Formily 支持多种验证规则，如必填、最小长度、最大长度、正则表达式等。

以下是一个简单的示例，定义了一个用户名和密码的表单，并添加了相应的验证规则：

{
  "type": "object",
  "properties": {
    "username": {
      "type": "string",
      "title": "用户名",
      "x-decorator": "FormItem",
      "x-component": "Input",
      "required": true,
      "minLength": 3,
      "maxLength": 15
    },
    "password": {
      "type": "string",
      "title": "密码",
      "x-decorator": "FormItem",
      "x-component": "Input",
      "x-component-props": {
        "type": "password"
      },
      "required": true,
      "minLength": 6
    }
  }
}

在这个示例中，我们定义了两个字段：username 和 password。对于 username 字段，我们设置了 required、minLength 和 maxLength 验证规则。对于 password 字段，我们设置了 required 和 minLength 验证规则。

2. 执行验证

在 Formily 中，我们可以通过调用 form.validate() 方法来执行表单验证。form.validate() 方法会根据 JSON Schema 中定义的验证规则对表单进行验证，并返回验证结果。

以下是一个简单的示例，展示了如何执行表单验证：

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, Field, Submit } from '@formily/react';

const form = createForm();

const schema = {
  // JSON Schema 定义
};

function App() {
  const handleSubmit = async () => {
    const isValid = await form.validate();
    if (isValid) {
      console.log('表单验证通过');
    } else {
      console.log('表单验证失败');
    }
  };

  return (
    <FormProvider form={form}>
      <Field schema={schema} />
      <Submit onClick={handleSubmit}>提交</Submit>
    </FormProvider>
  );
}

export default App;

在这个示例中，我们首先创建了一个 Formily 表单实例，然后定义了一个 JSON Schema。然后，我们使用 FormProvider 和 Field 组件来渲染表单。最后，我们定义了一个 handleSubmit 函数，该函数会在用户点击提交按钮时执行表单验证。

3. 自定义验证规则

除了内置的验证规则外，Formily 还允许我们定义自定义的验证规则。我们可以通过在 JSON Schema 中使用 x-validator 属性来定义自定义的验证规则。

以下是一个简单的示例，定义了一个自定义的验证规则：

{
  "type": "object",
  "properties": {
    "username": {
      "type": "string",
      "title": "用户名",
      "x-decorator": "FormItem",
      "x-component": "Input",
      "required": true,
      "minLength": 3,
      "maxLength": 15,
      "x-validator": {
        "name": "customValidator",
        "message": "用户名必须是字母或数字"
      }
    }
  }
}