Formik 및 Yup을 사용하여 React에서 양식 및 양식 유효성 검사

일반적으로 프런트엔드 및 소프트웨어 엔지니어로서 보안은 성능 다음으로 웹 애플리케이션을 구축할 때 주요 관심사 중 하나입니다. 따라서 악의적인 사용자의 외부 양식 남용을 방지하기 위해 시간을 투자하는 것은 결코 헛된 노력이 아닙니다.
Yup 및 Formik을 사용하여 연락처 양식을 작성하여 React에서 양식 유효성 검사 및 양식을 통해 작업할 것입니다.

전제 조건

이 자습서를 시작하기 전에 다음이 필요합니다.

- 반응 지식

예 설치됨

Formik 설치됨

반응 설치

setting up our project

 npx create-react-app yup-formik-validation
 cd yup-formik-validation
 yarn start

포르믹

Formik is a library that manages form values(datas),validation and error messages, and handling of form submission. Making interacting with form as easy as a walk in the park.

Formik 설치

yarn add formik 

예

Yup is a JavaScript schema builder for value parsing and validations.

설치 예

 yarn add yup 

모듈 초기화

After all installation we'll be working inside our App.js file.

> app.js
import React, { useState } from 'react';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';

다음 작업 라인은 Formik을 사용하여 양식 및 양식 필드를 설정하는 것입니다. 즉, 4개 필드에서 작업할 것입니다.

이름 필드

성 필드

이메일 필드

메시지 필드(textarea 요소 사용)

Before we move forward lets talk about formik element and some of it attributes.
Formik element housing both Form element and it child element (Field elements).

  <Formik>
    <Form>
      <Field></Field>
   </Form>
    ...
  </Formik>

Formik element also have some attributes that are required when setting up a form. Listed below:

InitialValues ​​: 필드 요소의 초기 값을 포함합니다.

initialValues={{
   firstName: '',
   lastName: '',
   email: '',
   message: ''
}}

ValidationSchema : 아래에서 설명할 Yup 유효성 검사 스키마를 보관합니다.

> // declared outside of our App function.
const validationSampleSchema = Yup.object().shape({
   firstName: Yup.string().min(1, 'First Name is too 
      short!').required('First Name field is required'),
   lastName: Yup.string().min(1, 'Last Name is too 
      short!').required('Last Name field is required'),
   email: Yup.string().email('Invalid email').required('Email 
      field is required'),
   message: Yup.string().required('Message field is required')
})

Yup has different data type methods validation and conditions methods e.g min() and required()

validationSchema={customValidationSchema}

passing of our custom schema to the validationSchema attribute

onSubmit : eventListener인 제출 기능.

onSubmit={(values, { setSubmitting, resetForm }) => {
  // when the handleSubmit is triggered on our submit button 
     below, every expressions and method actions get triggered

  // Reseting our form fields to empty
     resetForm({ values: "" });
}}

Form 렌더링 및 Formik 소품 및 메서드 사용 가능

{(
  {
    setFieldValue,
    values,
    errors,
    touched,
    handleSubmit
  }) => (
     <>
       <form></form>
     <>
)}

<form>
   <div className='row'>
      <div className='col-md-6'>
         <div className="form-group mb-3">
            <label>First Name</label>
            <Field className="form-control" name="firstName" 
              value={values.firstName} placeholder="First 
              Name"/>
            {errors.firstName && touched.firstName && (<small 
            className="text-danger">{errors.firstName} 
            </small>)}
        </div>
      </div>
      <div className='col-md-6'>
         <div className="form-group mb-3">
            <label>Last Name</label>
            <Field name="lastName" className="form-control" 
             value={values.lastName} placeholder="Last Name" 
            />
            {errors.lastName && touched.lastName && (<small 
             className="text-danger">{errors.lastName} 
             </small>)}
         </div>
      </div>
      <div className='col-md-12'>
         <div className="form-group mb-3">
            <label>Email</label>
            <Field type="email" className="form-control" 
              value={values.email} name="email" 
              placeholder="Email" />
            {errors.email && touched.email && (<small 
             className="text-danger">{errors.email}</small>)}
          </div>
       </div>
       <div className="col-md-12">
          <div className="form-group mb-3">
            <label>Drop Message</label>
            <Field name="message">
                  {({
                      field,
                      meta,
                  }) => (
                 <div>
                   <textarea className="form-control" 
                    name="message" id="message"
                    placeholder="Type here" value= 
                    {values.message} rows="3" {...field} > 
                  </textarea>
                  {meta.touched && meta.error && ( <small 
                  className="text-danger">{meta.error}
                  </small>)}
                </div>
                )}
            </Field>
         </div>
       </div>
    </div>
    <button type="submit" className='btn btn-sm btn-success' 
     onClick={handleSubmit}>Submit</button>
 </form>

two Field attributes are important to us, in our above code:

• name: automatically hook up inputs to Formik using the name attribute to match up with Formik state. <Field name={'email'}/> name attribute matches the property declared in our initialValues.
• value: Formik access the value through the value attribute value={values.fieldName} e.g value={values.email}

오류

{errors.firstName && touched.firstName && (<small className="text-danger">{errors.firstName}</small>)}

whenever our field has been touched, and it contains an error, display it.
The error setup above works with our firstName field.

제출하다

<button type="submit" className='btn btn-sm btn-success' 
  onClick={handleSubmit}>Submit</button>

onClick eventlistener triggers our handleSubmit (Formik method), which is available to us when we rendered our form.

업데이트된 onSubmit Formik 속성

onSubmit={(values, { setSubmitting, resetForm }) => {

  // assigning our values from the fields to payload variable.   
  const payload = values;

  // we have a handleNext function that saves our contact form 
     field values into a result state.
  handleNext(payload);

  // Reseting our form fields to empty
  resetForm({ values: "" });
}}

const [showResult, setShowResult] = useState(false);
const [result, setResult] = useState({});

const handleNext = (payload) => {
    setResult(payload)
    setShowResult(true);
}

예 최종 결과에서 Formik Validation Contact

Demo
Yup Formik Validation Contact Form Demo

결론

양식 유효성 검사는 웹 응용 프로그램 구축의 필수 부분이며 Formik은 어려운 부분을 수행하는 React에서 양식 작업을 돕고 Yup이 유효성 검사를 처리하는 것과 같은 방식으로 웹 앱 개발의 다른 중요한 부분에 대해 더 걱정할 수 있습니다.

주제에 대한 보다 광범위한 설명을 보려면 다음 공식 문서를 확인하세요.

Formik

Yup

github에서 전체 코드 소스를 찾을 수도 있습니다.

Yup Formik Validation In React

속성

Formik

Yup

질문이 있으신가요? 구현하는 데 문제가 있습니까?

Drop a comment let work through them together.

도움이 되셨나요?

You can follow me here on Dev and also on Twitter: