1. 설치

$ npm install formik yup

 

 

2.  유효성을 체크를 위한 Validation  scema  생성

UseSimpleValidation.js

import * as Yup from "yup";
import { useMemo } from "react";


const UseSimpleValidation = () => {
    const schema = useMemo(() => {
        return Yup.object().shape({
            firstName: Yup.string()
                .required('first name 은 필수 항목입니다.'),
            // middleName: Yup.string().required(' middle name 은 필수 항목입니다.'),

            // lastname: Yup.string()
            //     .required('last name 은 필수 항목입니다.'),

            email: Yup.string()
                .email('이메일이 잘못되었습니다.')
                .required('이메일은 필수 항목입니다.'),
            // password: Yup.string()
            //     .min(6, '비밀번호는 6자 이상이어야 합니다.')
            //     .required('비밀번호가 필요합니다.'),
            // confirmPassword: Yup.string()
            //     .oneOf([Yup.ref('password'), null], '비밀번호가 일치해야합니다.')
            //     .required('비밀번호 확인이 필요합니다.')
        });
    }, []);

    return { schema };
};

export default UseSimpleValidation;

 

 

3. 초기값  initialValues

const initialValues = {
    firstName: '',
    // middleName: '',
    // lastName: '',
    email: '',

    // password: '',
    // confirmPassword: ''
};

 

 

4. 전송 함수

    const submitForm = (values) => {
        console.log("submitForm  :", values);

        setTimeout(() => {

            // let dataToSubmit = {
            //     email: values.email,
            //     password: values.password,
            //     name: values.name,
            //     lastname: values.lastname
            // };
            // console.log("저장 할 user :", dataToSubmit);

            // dispatch(registerUser(dataToSubmit)).then(response => {
            //     if (response.payload.success) {
            //         //props.history.push("/login");
            //         navigate("/login");
            //     } else {
            //         alert(response.payload.err.errmsg)
            //     }
            // })

        }, 500);
    }

 

 

 

 

5.  다음과 같이

Formik 태그로 감싸주고 속성값들을 initialValues,  validationSchema , onSubmit 설정 처리 한다.

 

  return (

        <Formik
            initialValues={initialValues}
            validationSchema={schema}
            onSubmit={submitForm}
        >

~



      </Formik >
    );

 

 

 

6. 다음   변수값들은  Formik 에서 제공하는 속성값들이다.

    {props => {
                const {
                    values,
                    touched,
                    errors,
                    dirty,
                    isSubmitting,
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    handleReset,
                    isValid
                } = props;

 

 

    return (

        <Formik
            initialValues={initialValues}
            validationSchema={schema}
            onSubmit={submitForm}
        >
            {props => {
                const {
                    values,
                    touched,
                    errors,
                    dirty,
                    isSubmitting,
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    handleReset,
                    isValid
                } = props;
                return (
                    <div className="app">


                        <form onSubmit={handleSubmit}>
                            <div className="form-row">
                                <label htmlFor="firstName">firstName</label>
                                <input
                                    type="text"
                                    name="firstName"
                                    id="firstName"
                                    value={values.firstName}
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    className={
                                        errors.firstName && touched.firstName ? "input-error" : null
                                    }
                                />
                                {errors.firstName && touched.firstName && (
                                    <span className="error">{errors.firstName}</span>
                                )}
                            </div>


                            <div className="form-row">
                                <label htmlFor="email">email</label>
                                <input
                                    type="email"
                                    name="email"
                                    id="email"
                                    value={values.email}
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    className={
                                        errors.email && touched.email ? "input-error" : null
                                    }
                                />
                                {errors.email && touched.email && (
                                    <span className="error">{errors.email}</span>
                                )}
                            </div>

                            <button type="submit" className="mainBtn"> REGISTER </button>

                       


                        </form>


                    </div>
                );
            }}
        </Formik >
    );

 

 

 

 

기타 css

 .input-error {
    border-color: #e63946;
  }

  .error {
    color:#e63946;
    font-size: 1rem;
    margin-top: 0.3rem;
  }

 

 

 

 

참조 :

React Form Validation 폼태그 유효성 검증을 쉽게 도와주는 Formik 사용방법

 

https://www.smashingmagazine.com/2020/10/react-validation-formik-yup/

 

https://codesandbox.io/s/formik-html-input-fields-and-custom-validation-rules-nw48z?from-embed=&file=/src/Form/Form.jsx:1294-1306

 

 

 

 

수정 :

https://github.dev/braverokmc79/web-term-project