React - 폼 유효성 체크 라이브러리 formik , yup

 

npm 설치

# 7) 폼 유효성 체크 라이브러리 설치
# 7-1) formik
npm i formik

# 7-2) yup
npm i yup
# typescript
npm i @types/yup

 

유효성 체크는 3가지로 나뉜다.

 

Javascript

변수 초기화 , 유효성 체크 , 값이 들어오는 함수

import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

// Todo : 유효성 체크 lib
  // Todo : Formik 객체 초기화 (initialValues) : html 태그에서
  // Todo : 체크대상 (email , password) : Field 태그
  const initialValues = {
    name: "",
    email: "",
    password: "",
    number: 0,
    repassword: "",
  };

  // Todo : 함수 정의
  // Todo : Formit 라이브러리 : validationSchema
  // Todo : validationSchema : 유효성 체크 규칙을 정의
  // Todo : validationSchema = Yup.object().shape({유효성 체크규칙})
  const validationSchema = Yup.object().shape({
    name: Yup.string()
      // test : 유효성 조건을 개발자가 직접 작성하는 함수
      .test(
        "len",
        "The username must be between 3 and 20 characters.",
        // 유효성 체크
        (val) => {
          if (
            val &&
            val.toString().length >= 3 &&
            val.toString().length <= 20
          ) {
            return true;
          }
          return false;
        }
      )
      // 필드가 비었을때
      .required("This field is required!"),
    email: Yup.string()
      .email("This is not a valid email.")
      .required("This field is required!"),
    password: Yup.string()
      .test(
        "len",
        "The password must be between 6 and 40 characters.",
        (val) => {
          if (
            val &&
            val.toString().length >= 6 &&
            val.toString().length <= 40
          ) {
            return true;
          }
          return false;
        }
      )
      .required("This field is required!"),
    // oneOf([Yup.ref("password")], "Password must match") : 패스워드 한번더 맞게 쳐야함
    repassword: Yup.string().oneOf(
      [Yup.ref("password")],
      "Passwords must match"
    ),
  });
  
    // Todo : 로그인 함수 : submit(Formit)
  // Todo : Formit lib 에서 자동으로 email , password 값을 보내줌
  const handleRegister = (formValue: any) => {
    const { name, email, password, number } = formValue;
  };

 

 

html

대충 봐보면

 

Formik 태그 - Formik 시작 , 끝

intialValues - 변수들

validationSchema - 유효성 검사

onSubmit - submit 버튼 클릭시 함수 호출

 

Form 태그 == input 태그

ErrorMessage 태그 - 유효성 에러 메시지

                  <Formik
                    initialValues={initialValues}
                    validationSchema={validationSchema}
                    onSubmit={handleRegister}
                  >
                    {({ values, errors, touched }) => (
                      <Form
                        name="contactForm"
                        id="contact_form"
                        className="form-border"
                      >
                        <h4>계정이 없으신가요? 지금 가입하세요!</h4>
                        <p>
                          저희 사이트에 가입하시면 다양한 게임타이틀 구매는 물론, 최신 게임 뉴스 소식을 얻을 수 있습니다.
                        </p>
                        <div className="row">
                          <div className="col-md-6">
                            <div className="field-set">
                              <label>이름:</label>
                              <Field
                                type="text"
                                name="name"
                                id="name"
                                className={
                                  "form-control" +
                                  (errors.name && touched.name
                                    ? " is-invalid"
                                    : "")
                                }
                              />
                              <ErrorMessage
                                name="name"
                                component="div"
                                className="invalid-feedback"
                              />
                            </div>
                          </div>
                          <div className="col-md-6">
                            <div className="field-set">
                              <label>이메일:</label>
                              <Field
                                type="text"
                                name="email"
                                id="email"
                                className={
                                  "form-control" +
                                  (errors.email && touched.email
                                    ? " is-invalid"
                                    : "")
                                }
                              />
                              <ErrorMessage
                                name="email"
                                component="div"
                                className="invalid-feedback"
                              />
                            </div>
                          </div>
                          <div className="col-md-6">
                            <div className="field-set">
                              <label>비밀번호:</label>
                              <Field
                                type="text"
                                name="password"
                                id="password"
                                className={
                                  "form-control" +
                                  (errors.password && touched.password
                                    ? " is-invalid"
                                    : "")
                                }
                              />
                              <ErrorMessage
                                name="password"
                                component="div"
                                className="invalid-feedback"
                              />
                            </div>
                          </div>
                          <div className="col-md-6">
                            <div className="field-set">
                              <label>비밀번호 재입력:</label>
                              <Field
                                type="password"
                                name="repassword"
                                id="repassword"
                                className={
                                  "form-control" +
                                  (errors.repassword && touched.repassword
                                    ? " is-invalid"
                                    : "")
                                }
                              />
                              <ErrorMessage
                                name="repassword"
                                component="div"
                                className="invalid-feedback"
                              />
                            </div>
                          </div>

                          {sendEmailClick && (
                            <div className="col-md-6">
                              <div className="field-set">
                                <label>이메일 인증번호 입력 :</label>
                                <Field
                                  type="text"
                                  name="number"
                                  id="number"
                                  value={verificationCode}
                                  onChange={(e: any) =>
                                    setVerificationCode(e.target.value)
                                  }
                                  className={
                                    "form-control" +
                                    (errors.email && touched.email
                                      ? " is-invalid"
                                      : "")
                                  }
                                />
                                <div className="d-flex align-items-center mt-2">
                                  <button
                                    type="button"
                                    className="btn-main color-2 me-3"
                                    onClick={handleVerification}
                                  >
                                    인증번호 확인
                                  </button>
                                  <button
                                    type="button"
                                    className="btn-main color-2 ml-2"
                                    onClick={() => handleResendEmail(values)}
                                  >
                                    인증번호 재전송
                                  </button>
                             
                                </div>
                                {verificationMessage && (
                                  <p
                                    className={
                                      isEmailRight
                                        ? "text-success"
                                        : "text-danger"
                                    }
                                  >
                                    {verificationMessage}
                                  </p>
                                )}
                                <ErrorMessage
                                  name="number"
                                  component="div"
                                  className="invalid-feedback"
                                />
                              </div>
                            </div>
                          )}
                        </div>
                      </Form>
                    )}
                  </Formik>

 

 

어라 submit 버튼 어디감 ㅋㅋㅋㅋㅋㅋ

 

뭐 대충 요로코롬 해서 Form 태그 안에

input type=submit 으로 submit 버튼을 넣어주면 될거다.