使用 Formik 和 Yup 进行 ReactJS 表单验证

如上一篇文章所述，我们可以使用受控组件来验证表单。但是，如果我们在网站上的许多地方都需要表格，这可能会很耗时，并且代码的长度可能会增加。 Formik 和 Yup 来救援了！ Formik 旨在轻松管理具有复杂验证的表单。 Formik 支持同步和异步表单级和字段级验证。此外，它还通过 Yup 提供了对基于模式的表单级验证的内置支持。我们还将使用引导程序，这样我们就不会在 HTML 和 CSS 上浪费时间。

下面是关于如何使用 Formik 和 Yup 进行表单验证的分步实现。

第 1 步：创建 React 应用程序并安装模块：

npx create-react-app react-form

第 2 步：创建项目文件夹 iereact-form 后，使用以下命令移动到该文件夹：

cd react-form

第 3 步：然后添加引导程序（如果您想创建自己的样式，这是可选的）。

yarn add bootstrap

第 4 步：我们可以继续添加 Formik 和 Yup。

yarn add formik yup

项目结构：它将如下所示。

项目结构

注意：我们将在App.js文件中记下整个代码。在这里，App 是我们编写代码的默认组件。

第 5 步： 是一个帮助您构建表单的组件。 InitialValues 是初始化表单中所有字段的道具。通常，初始化是一个空字符串，但在某些字段中，您可能需要一个初始值。

Javascript

import React from "react";
import { Formik, Form, Field } from "formik";
  
import "bootstrap/dist/css/bootstrap.css";
  
class App extends React.Component {
  render() {
    return (
      

        

          

            
              {(props) => (
                

                  {console.log(props)}
                  

                    

                      
Login Form
                    
                  
                  

                    

                      Email
                      
                    
  
                    

                      
                        Password
                      
                      
                    
  
                    
                      Submit
                    
                  
                
              )}
            
          
        
      
    );
  }
}
  
export default App;

Javascript

 {
      console.log(values)
      alert("Form is validated and in this 
        block api call should be made...");
      }
    }
>

Javascript

const LoginSchema = Yup.object().shape({
  email: Yup.string()
  
    // Format Validation
    .email("Invalid email address format")
  
    // Required Field Validation
    .required("Email is required"),
  password: Yup.string()
  
    //Minimum Character Validation
    .min(3, "Password must be 3 characters at minimum")
    .required("Password is required")
});

Javascript

 {
    console.log(values)
    alert("Form is validated! Submitting the form...");
}}
>

Javascript

Email
  

  

Javascript

isSubmitting ? (
Login Page
) : (
Confirmation of Login
)
// (condition) ? (if true this component gets displayed) :
                 (else this component gets displayed)

App.js

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import "bootstrap/dist/css/bootstrap.css";
  
const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address format")
    .required("Email is required"),
  password: Yup.string()
    .min(3, "Password must be 3 characters at minimum")
    .required("Password is required"),
});
  
class App extends React.Component {
  render() {
    return (
      

        

          

             {
                console.log(values);
                alert("Form is validated! Submitting the form...");
              }}
            >
              {({ touched, errors, isSubmitting, values }) =>
                !isSubmitting ? (
                  

                    

                      

                        
Login Form
                      
                    
                    

                      

                        Email
                        
  
                        
                      
  
                      

                        
                          Password
                        
                        
                        
                      
  
                      
                        Submit
                      
                    
                  
                ) : (
                  

                    
Form Submitted
  
                    

                      Thank for your connecting with us. Here's what we got from
                      you !
                    
                    

                      
Email: {values.email}
                      

                        Password: {values.password}
                      
                    
                  
                )
              }
            
          
        
      
    );
  }
}
  
export default App;

第 6 步：我们正在添加一个代码块，我们在其中传递 Formik 提供的道具，并在控制台上打印道具对象。然后我们使用 Bootstrap 提供的

组件，在其中我们再次传递了 2 个组件，即和组件。最后，我们使用 Bootstrap 组件来提交表单。表单组件的基本锅炉代码，应包含在 formik 中。

Javascript

import React from "react";
import { Formik, Form, Field } from "formik";
  
import "bootstrap/dist/css/bootstrap.css";
  
class App extends React.Component {
  render() {
    return (
      

        

          

            
              {(props) => (
                

                  {console.log(props)}
                  

                    

                      
Login Form
                    
                  
                  
                    

                      Email
                      
                    
  
                    

                      
                        Password
                      
                      
                    
  
                    

                      Submit                                                         

              )}