Formily 如何进行表单验证

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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": "用户名必须是字母或数字"}}}
}