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://github.dev/braverokmc79/web-term-project
댓글 ( 4)
댓글 남기기