react表单验证_如何使用React和Formik验证登录表单

react表单验证

介绍 (Introduction)

In order to ensure that a form element of your web application is returning valid data, it is helpful to build automated validation into your code. This is true in React as well, as creating form validation early on can often save you from encountering errors down the road.

为了确保Web应用程序的表单元素正在返回有效数据，将自动验证内置到代码中很有帮助。 在React中也是如此，因为尽早创建表单验证通常可以使您免于遇到后续错误。

In React, working with and validating forms can be a bit verbose. To make your code more manageable, you can use a package like Formik to build your forms.

在React中，使用和验证表单可能有点冗长。 为了使代码更易于管理，可以使用Formik之类的程序包来构建表单。

In this tutorial, you will create a React project, add the Formik package, customize the Formik component with an onSubmit callback and a validate function for error messages, and then display those error messages to the user.

在本教程中，您将创建一个React项目，添加Formik包，使用onSubmit回调和错误消息的validate函数自定义Formik组件，然后将这些错误消息显示给用户。

By the end of this tutorial, you will have a project like this live example on CodeSandbox.

在本教程结束时，您将在CodeSandbox上有一个类似此示例的项目。

先决条件 (Prerequisites)

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment

  Node.js本地安装，您可以按照如何安装Node.js并创建本地开发环境来完成

• Create React App, which you can do by following How To Set Up A React Project

  创建React应用程序 ，您可以按照如何设置React项目来完成

第1步-设置项目 (Step 1 — Setting up the Project)

Use Create React App to create a project. For the purposes of the tutorial, you can name your project validate-react-login-form.

使用Create React App创建一个项目。 就本教程而言，您可以将项目命名为validate-react-login-form 。

• npx create-react-app validate-react-login-form

  npx create-react-app validate-react-login-form

You can now change into the project directory, start the node server, and view it in a web browser.

现在，您可以进入项目目录，启动节点服务器，然后在Web浏览器中查看它。

• cd validate-react-login-form

  cd validate-react-login-form

• npm start
  npm开始

If you have yarn installed, your message may instruct you to use yarn start instead of npm start. If you prefer to have npm instructions, it is possible to use --use-npm flag when creating your project. You can use either yarn or npm for this tutorial.

如果安装了yarn ，则您的消息可能会指示您使用yarn start而不是npm start 。 如果您更喜欢npm说明，则可以在创建项目时使用--use-npm标志 。 您可以在本教程中使用yarn或npm 。

You can also open this project directory in your favorite editor to create and modify files.

您也可以在收藏夹编辑器中打开此项目目录，以创建和修改文件。

Create React App will include several files, but for the purposes of this tutorial you will only be directly creating or modifying three files: index.js, index.css, and ValidatedLoginForm.js.

Create React App将包含多个文件，但是出于本教程的目的，您将仅直接创建或修改三个文件： index.js ， index.css和ValidatedLoginForm.js 。

第2步-安装依赖项 (Step 2 — Installing Dependencies)

Now that we have our initial project created, we will install three packages: Formik, email-validator, and Yup.

现在，我们有我们最初的项目创建，我们将安装三个包： Formik ， 电子邮件验证 ，并没错 。

Formik makes handling validation, error messages, and form submission more manageable.

Formik使处理验证，错误消息和表单提交的操作更加易于管理。

In your terminal, install Formik:

在您的终端中，安装Formik：

• npm install formik
  npm安装formik

email-validator is a tiny package used to validate emails.

email-validator是用于验证电子邮件的微型软件包。

If your terminal, install email-validator:

如果是您的终端，请安装email-validator ：

• npm install email-validator
  npm安装电子邮件验证器

Yup is a schema validator that is commonly used in conjunction with Formik.

Yup是一种模式验证器，通常与Formik结合使用。

In your terminal, install Yup:

在您的终端中，安装Yup：

• npm install yup
  npm安装yup <