保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应形式验证:这里’s How to Do it

关于React Form验证的简介:

作为开发人员,通常建议最好不要重新发明现有的轮子。因此,要实施解决方案,第一步始终是寻找针对同一问题的现有解决方案,这就是React的全部意义所在!它使我们能够创建可重用的组件,从而无需在代码中重复自己。在React中,如果用户未使用他们期望的输入类型正确填写表单,则表单验证允许错误消息显示在我们的应用程序中。 

在本文中,我们将介绍一些React中最常用的表单验证和管理解决方案。加入我们,我们只需几个简单的步骤就可以在React应用程序中添加自定义表单验证。阅读本文之后,您将能够在应用程序中存在的React组件中创建自己的自定义表单验证。 

 

码:

现在,我们将在下面看到一个代码,该代码假定用户熟悉制作React表单所需的元素和过程。在里面 handleChange 在功能上,应用了表单验证规则,这些规则负责处理来自用户的输入。

我们将逐行显示和解释代码。只要您点击 创造 按钮,控制台选项卡将显示该表单是否有效。代码行解释如下:

1-5行: 

有效的电子邮件正则表达式 变量 保留正则表达式的规则,以便检查给定的输入是否是有效的电子邮件。

 

6-10行:

功能 有效ateForm 在那里检查是否存在任何输入字段是否有任何错误。如果观察到错误,则该函数通过控制台将其输出。

 

const 有效ateForm = 错误 => {

   有效 = 真正;

  目的.价值观(错误)。 每次(=>.长度 > 0 && (有效 = ));

  返回 有效;

};

第32-52行:

在里面 handleChange 功能,实际的验证规则已应用。我们可以看到在函数中有一个实现 开关盒 在其中应用了特定于输入字段的规则。例如,如果 全名 是输入字段(在第33-38行中),然后函数将检查该字段中值的长度。遇到输入的长度小于5的情况,它将自动设置与之关联的字段的错误消息。否则,与之关联的字段的错误消息将被设置为空字段。

在React中添加:

在React中,就像添加任何其他元素一样,添加一个表单。例如,我们将创建一个表单,该表单将允许用户输入其姓名:

不同的React Form验证库:

作为开发人员,如果我们不花很多时间重新发明轮子,通常是对我们最大的利益。这就是我们实施解决方案的第一步是寻找现有解决方案的原因。这就是我们之所以使用React的原因,是因为它能够创建可重用的组件,从而使我们不必一次又一次地重复同一件事。因此,让我们看一下已经存在的一些用于表单管理和验证的流行解决方案:

形式:

没有Formik,如何完成反应表格验证解决方案的综述? Formik基本上是React中最受欢迎的库,用于构建和管理React表单。它在Github上拥有超过2.2万颗恒星,说明Formik的受欢迎程度。如果您正在寻找可扩展且性能优异的产品,以最小的API帮助您使用表单,那么Formik就是答案。

Formik可用于处理表单状态,验证甚至错误处理。 Formik通过Yup库支持基于架构的表单验证。它不使用外部状态管理(例如Redux)来管理表单状态。 反应 Formik与React Native和React Native Web都兼容,并且大小仅为15kb。

 

反应最终形式: 

如果您正在寻找一个零依赖的框架无关的表单验证库,那么React Final Form是您的最佳选择。该库的原始名称是Final Form,而React Final Form是React的包装。 反应 Final Form是基于订阅的,因此当我们更新最终状态时,仅表单的特定字段会被更新。我们有两种使用React final Form验证表单的方式,两种方式是记录级和字段级。验证表单的方式完全取决于表单的复杂性。如果表格相当简单,则最好坚持进行字段级验证,但如果不是这样,则必须使用记录级验证。

反应 Final Form不依赖任何库。它使我们能够管理哪个表单元素获得更改表单状态的通知,这使React Final Form表现出色。它支持React Hooks,并通过Yup库支持基于架构的验证。它也非常轻巧。

制服:

 这是一个以性能为中心的表单库,旨在供React和Uniform通过使用受控表单组件来实现。这要求您创建自己的自定义组件,其中useField Hook用于访问字段数据以及用于与字段进行交互的方法。 Uniform通过使用@ uniform / mobile包来支持React Native,它使用HTML元素而不是自定义组件。还提供了对复杂表格结构的支持,可以通过在输入名称中使用点符号来进行访问。 

反应形式:

反应 Form提供了钩子,用于管理表单状态和在React中验证表单。 反应 Form的使用方式与Uniform的使用方式非常相似。因此,在React Form中,我们首先必须创建一个自定义字段组件,在其中使用use字段Hook。通过这样做,我们获得了可以帮助我们存储字段错误的属性。它通过使用useForm支持React Hooks,还使用备注的概念来更快地重新呈现。它只有4.5kb,所以重量也很轻。

反应挂钩形式: 

这是一个非常轻巧的Rea​​ct表单验证库。它主要将Hooks用于将Form验证添加到用于输入的HTML元素中。这是用于验证表单的非常现代的库,非常高效且易于使用。在到目前为止我们讨论过的所有库中,React Hook Form要求您编写最少的代码以供使用。它甚至只是使用Hook并将引用添加到所需字段的两步过程。它利用受控验证pf形式来使性能达到最佳,甚至使其与现有的HTML标准保持一致以验证形式,为此,它使用诸如require,max,material等规则。

反应 Hook Form还通过简单地将HTML表单元素替换为React Native等效表单元素来支持React Native。它不依赖于任何其他库,甚至为我们提供了隔离组件和渲染以提高性能的能力。

如果我们想快速创建琐碎的表单,React Hook Forms甚至还有一个表单生成器实用程序。它在Yup库的帮助下支持基于架构的验证。它是用户友好的,因为该文档已记录在案,并且具有许多有关如何使用它的示例。

结论:

在本文中,我们深入了解了反应表格验证。我们还研究了当今存在的一些最受欢迎和最有用的React Form库。它可以帮助我们度过一个愉快的时光,使我们的表格无效。可以很容易地观察到大多数库。在我们讨论过的所有库中,每个库都有其优缺点。这在很大程度上取决于开发人员使用哪个库的需求。

但是无论如何,使用某些著名的库(例如Formik)永远不会出错。反应最终形式,甚至反应挂钩形式。在本文中,我们简单地看到了一些用于React的Form管理库的汇总。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。