내일배움캠프 13주차 TIL (13-1) 유효성검사

유효성 검사를하기위해서는 3가지의 상태가필요하다

 //user정보
    const [name, setName] = useState("")
    const [nickName, setNickName] = useState("")
    const [age, setAge] = useState("")
    const [id, setId] = useState("")
    const [password, setPassword] = useState("")
    const [passwordConfirm, setPasswordConfirm] = useState("")
    const [email, setEmail] = useState("")

    //오류메시지 상태저장
    const [nameMessage, setNameMessage] = useState("")
    const [nickNameMessage, setNickNameMessage] = useState("")
    const [emailMessage, setEmailMessage] = useState("")
    const [passwordMessage, setPasswordMessage] = useState("")
    const [idMessage, setidMessage] = useState("")
    const [passwordConfirmMessage, setPasswordConfirmMessage] = useState("")

    //유효성검사
    const [isName, setIsName] = useState(false)
    const [isNickName, setIsNickName] = useState(false)
    const [isEmail, setIsEmail] = useState(false)
    const [isId, setIsid] = useState(false)
    const [isPassword, setIsPassword] = useState(false)
    const [isPasswordConfirm, setIsPasswordConfirm] = useState(false)

표현식으로는 정규표현식을 사용하며

useCallback을 사용 if문을 적용하여 어떤 문구를 띄울것인가 정의를해준다

이또한  state에 값을 넣어줘야한다

 const idHandler = useCallback((e) => {
        const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/
        const idCurrent = e.target.value
        setId(idCurrent)

        if (!idRegex.test(idCurrent)) {
            setidMessage("숫자+영문자 조합으로 8자리 이상 입력해주세요!")
            setIsid(false)
        } else {
            setidMessage("완벽한 아이디에요 : )")
            setIsid(true)
        }
    }, [])

비밀번호를 입력하는곳에서 는 페스워드가 true, false값을 가지고있어야하며

이것으로 인풋태그하단에 입력이 올바르게되었는지 알림을줄수있다

 <StInput
                    placeholder="비밀번호를 입력하세요."
                    type="password"
                    value={password}
                    onChange={passwordHandler}
                    passwordText="비밀번호 (숫자+영문자+특수문자 조합으로 8자리 이상)"
                />
                {password?.length > 0 && (
                    <Colortext
                        className={`message ${
                            isPassword ? "success" : "error"
                        }`}
                    >
                        {passwordMessage}
                    </Colortext>
                )}

프로젝트를하면 항상 메인페이지나 ui적인부분들만 만들었는데

이번에는 내가직접만들어본것이 처음인거같다

axios db.json 에 데이터를 보내고 다시 그데이터를가져와서 가공까지하는것을

배웠기에 이번주차는 무언가더 발전한느낌이 들어서 기분이좋다

 

프로젝트발포 d -4일전