로그인/폼체크2 - 유효성 검사

목차

1. validate 함수 선언
2. validate 함수 호출
3. 유효성 검사 조건식 작성
4. 함수의 return값으로 state 업데이트
5. 동작 확인
6. 누적 작성 코드

 

 

---

 

 

유효성 검사는 종종 쓰이기 때문에 따로 함수로 빼보자!

 

 

1. validate이란 이름의 함수를 선언

const validate = (input) => {

}

 

 

 

2. form 제출 시 실행되도록 하기 위해 handleSubmit 함수에서 호출

 

 

Form 컴포넌트의 handleSubmit 함수에서

 

1. 변수 input 선언 후,
2. 사용자가 input 박스에 입력한 value값을 받아와서 속성으로 담는다.
3. 그 다음 validate 함수를 호출하여 인자값으로 input 객체를 넣는다.

 

const input = {
    userid: id.value,
    password: pw.value
}

validate(input)

 

다음, 다시 validate 함수로 돌아와서,

함수의 코드블럭 안에 유효성 검사를 할 조건식을 작성해보자.

 

 

그 이전에...

validate함수의 매개변수를 작성하는 방법과 관련하여

 

앞선 코드에서는

매개변수를 받을 때 input 객체를 그대로 받았지만,

아래와 같이 비구조 할당문을 사용해서 input의 속성인 userid와 password로 받을 수도 있다.

 

const validate = ({userid,password}) => {

}

 

 

3. 유효성 검사를 위한 조건식 작성

 

유효성 검사를 하기 위한 조건식 중

id는 정규 표현식으로,

password는 문자열의 길이 비교로 작성해보았다.

 

const validate = ({userid,password}) => {
    const errors = {}
    const exp = /^[a-zA-A0-9.%+-]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/

    if(!userid ){
        errors.userid = '이메일이 입력되지 않았습니다.'
    } else if(!exp.test(userid)){
        errors.userid='입력된 이메일이 유효하지 않습니다.'
    }
    if(!password){
        errors.password = '패스워드가 입력되지 않았습니다.'
    } else if(password.length < 8){
        errors.password = '8자 이상의 패스워드를 사용해야 합니다.'
    }
    return errors;
}

 

위와 같이 작성해서 if 문에 각각의 변수가 false 인 경우,

span에 각 속성에 작성된 문자열이 나타나도록 하는 코드를 작성해보았다.

 

각각의 문구는 조건이 충족될 경우 errors 객체에 담겨서 반환된다.

 

<참고> 정규표현식 의미
/^[a-zA-A0-9.%+-]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/

처음 []은 영문대소문자/0-9까지의 숫자/.%+-가 허용된다는 의미
+@는 첫번째 필수 조건 충족 이후 '@'가 필수로 작성되어야 한다는 뜻
그 다음 []는 영문 대소문자 허용
+\.는 '.'이 필수로 작성되어야 한다는 뜻
마지막 []는 영문 대소문자 허용되며 글자수는 2~4자여야 함

 

 

그 다음에는

handleSubmit 함수의 내용을 다음과 같이 수정하도록 하자.

 

 

4. 함수의 return값으로 state 업데이트

const handleSubmit = e => {
    e.preventDefault()
    setSubmit(true)

    const input = {
        userid: id.value,
        password: pw.value
    }

    setErrors(validate(input))
}

 

 

5. 서버 실행해서 결과 확인

 

 

 

5. 누적 작성 코드

 

import React, {useEffect, useState} from 'react'

const useInput = (defaultValue) => {
    const [value, setValue] = useState(defaultValue)
    const onChange = e => {
        setValue(e.target.value)
    }
    return ({
        value,
        onChange
    })
}

const validate = ({userid,password}) => {
    const errors = {}
    const exp = /^[a-zA-A0-9.%+-]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/

    if(!userid ){
        errors.userid = '이메일이 입력되지 않았습니다.'
    } else if(!exp.test(userid)){
        errors.userid='입력된 이메일이 유효하지 않습니다.'
    }
    if(!password){
        errors.password = '패스워드가 입력되지 않았습니다.'
    } else if(password.length < 8){
        errors.password = '8자 이상의 패스워드를 사용해야 합니다.'
    }
    return errors;
}

const Form = () => {
    const id = useInput('')
    const pw = useInput('')
    const [submit, setSubmit] = useState(false)
    const [errors, setErrors] = useState({})

    const handleSubmit = e => {
        e.preventDefault()
        setSubmit(true)

        const input = {
            userid: id.value,
            password: pw.value
        }

        setErrors(validate(input))
    }


    useEffect(() => {
        if (submit) {
            console.log('회원 가입 시켜줘')
            if (Object.keys(errors).length === 0){
                alert('회원가입 가능')
                //axios
            }
            setSubmit(false)
        }
    }, [submit]
    )
    

    return(
        <form onSubmit = {handleSubmit}>
            <h2>회원가입</h2>
            <ul>
                <li>
                    <label htmlFor='userid'>아이디</label>
                    <input type ="text" name="userid" {...id}/>
                    { errors.userid && <span> { errors.userid} </span> }
                </li>
                <li>
                    <label htmlForm='password'>패스워드</label>
                    <input type="password" name="password" {...pw}/>
                    { errors.password && <span> { errors.password} </span> }
                </li>
                <li><input type="submit" value="가입" disabled={submit}></input></li>
            </ul>
        </form>
    )
}

export default Form