如何在React中实现FormValidation？

8 浏览
0 Comments

如何在React中实现FormValidation？

我为我的React-App项目创建了一个FormValidation函数。我使用了教程"React中的表单验证"来实现这个功能。你可以在Github上找到一个演示项目。问题是，这个FormValidation在我的项目中不起作用。我不知道为什么。

enter image description here

我知道帮助我需要时间，但如果能帮助我，我会非常感激，因为我对此了解很少。由于文件太大无法在此处插入，我创建了一个SandBox.io项目。这个项目和我自己使用的项目完全一样：

Edit wozl0qmw6w

感谢您的帮助。对于我的React-App，我使用Evergreen UI框架。你可以在这里找到我使用的TextInputFields的属性。

0

3 答案

0 Comments

如何在React中实现表单验证？

表单的创建和验证通常是相当痛苦的。因此，我建议使用一些库来简化这个过程。以下是一些可以使用的React表单库：

1. React Form:

官方网站：https://react-form.js.org/#/

2. Formik:

官方网站：https://formik.org/

3. React Hook Form:

官方网站：https://react-hook-form.com/

4. Final Form:

官方网站：https://final-form.org/react

5. Redux Form:

官方网站：https://redux-form.com/8.3.0/

以上是一些常用的React表单验证库，你可以根据自己的需求选择适合的库来使用。使用这些库可以大大简化表单验证的过程，提高开发效率。

0
0 Comments

如何在React中实现表单验证？

问题的原因：

在React中实现表单验证的原因是为了确保用户输入的数据符合预期的格式和要求。通过表单验证，可以在提交表单之前对输入的数据进行验证，确保数据的准确性和完整性，并提供相应的错误信息给用户。

解决方法：

以下是实现表单验证的步骤：

1. 创建一个单独的验证模块，用于包含所有的验证函数。

2. 在验证模块中，编写针对不同表单字段的验证函数，例如验证邮箱和手机号码的函数。

3. 每个验证函数都会返回一个包含验证结果的对象，其中包括验证状态（status）和错误消息（value）。

4. 在React组件中，通过引入验证模块，可以直接使用这些验证函数。

5. 在表单组件的构造函数中初始化状态，包括各个表单字段的错误状态和错误消息。

6. 在提交表单时，调用一个中间件函数（checkFormStatus）进行表单验证。

7. 在中间件函数中，获取表单字段的值，并调用相应的验证函数进行验证。

8. 如果所有字段的验证状态都为false，则返回true，表示表单验证通过。

9. 如果有字段的验证状态为true，则更新对应字段的错误状态和错误消息，并返回false，表示表单验证未通过。

10. 在表单组件中，根据各个字段的错误状态和错误消息，展示相应的错误提示信息给用户。

以上是实现表单验证的基本步骤。通过将验证逻辑与React组件分离，可以提高代码的可维护性和复用性，并提供更好的开发体验。

示例代码中的验证模块使用了正则表达式对邮箱和手机号码进行验证，同时提供了相应的错误消息。在表单组件中，根据字段的错误状态和错误消息，展示相应的错误提示信息，并在提交表单时进行验证。

通过以上的实现方法，可以在React中实现表单验证，确保用户输入的数据符合预期，并提供相应的错误信息给用户。

0
0 Comments

如果您的项目已经升级到最新的React版本，并且使用了Hook，那么您可以尝试使用下面的包：

Github: https://github.com/bluebill1049/react-hook-form

Website: http://react-hook-form.now.sh

下面是一个示例：

import React from 'react'
import useForm from 'react-hook-form'
function App() {
  const { register, handleSubmit, errors } = useForm() // 初始化hook
  const onSubmit = (data) => { console.log(data) } // 验证通过后的回调函数
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="password" ref={register({ required: true })} /> 
      <input name="lastname" ref={register({ required: true })} /> 
      <input type="submit" />
    </form>
  )
}

我已经使用了您的库，非常棒！

0