inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

퀴즈5 비밀번호 유효성 검증

해결된 질문

286

윰이

작성한 질문수 5

0

비밀번호와 비밀번호 확인이 서로 일치하는지 검증하는 코드를 어떻게 짜야할 지 모르겠어요.. 현재 코드로 하면 에러가 납니다..! 봐주시면 감사하겠습니다ㅠㅠ 해당코드 //문제부분!!!!!!!!!!!!!!!!!!!!********* 으로 해놓았습니다!!

import { useState } from 'react';

export default function signUpPage() {

    //이메일, 비밀번호 담기
    const [ email, setEmail ] = useState("");
    const [ password, setPassWord ] = useState("");
    const [ Repassword, setRePassWord ] = useState("");

    //이메일 에러
    const [ emailError, setEmailError ] = useState("");

    //비밀번호 에러
    const [ passWordError, setPassWordError ] = useState("");

    //비밀번호확인 에러
    const [ RepassWordError, setRePassWordError ] = useState("");

    //이메일
    const onChangeEmail = (event) =>{
        //이벤트 핸들러
        console.log(event);
        console.log(event.target); //작동된 태그
        console.log(event.target.value); //작동된 태그에 입력된 값

        //변경된 이메일 값을 넣음
        setEmail(event.target.value);
        if(event.target.value !== ''){
            //내용 입력시 에러 없애주는거
            setEmailError("");
        }
    }

    const onChangePassWord = (event) => {
        setPassWord(event.target.value);
        if(event.target.value !== ''){
            setPassWordError("");
        }
    }


//문제부분!!!!!!!!!!!!!!!!!!!!*********
    const onChangeRePassWord = (event) => {
        // const currentPassWord = event.target.value;
        // setRePassWord(currentPassWord);
        // if(password === currentPassWord){
        //     setRePassWordError("");
        // }
        setRePassWord(event.target.value);
        if((password === Repassword()) || (event.target.value !== '')){
            setRePassWordError("");
        }



    }

    //등록하기 버튼 에러검증
    const onClickSign = () => {
        //이메일 @ 검증
        //includes("") 해당 문자가 있냐 없냐
        if(email.includes("@") === false) {
            setEmailError("이메일이 올바르지 않습니다. @ 형태로 입력해주세요!")
        } 
        if(!password){
            setPassWordError("비밀번호를 입력해주세요")
        }
//문제부분!!!!!!!!!!!!!!!!!!!!*********
        if((password !== Repassword) || (!Repassword)){
            setRePassWordError("비밀번호를 확인해주세요")
        }
        //회원가입 완료
        if(email && password === Repassword) {
            alert("회원가입이 완료되었습니다")
        }
    }


    return(
        <>
            이메일: <input type="text"  onChange={onChangeEmail} /> 
            <div>{emailError}</div>
            비밀번호 :<input type="text" onChange={onChangePassWord} /> 
            <div>{passWordError}</div>
            비밀번호확인 :<input type="text" onChange={onChangeRePassWord}  />
            <div>{RepassWordError}</div>
            <button id="submit" onClick={onClickSign}>회원가입</button>
        </>
    )
}

 

 

react node.js seo graphql next.js

답변 1

0

노원두

안녕하세요! 윰이님!

수업에서 의도된 방식은 password, repassword 둘을 각각 따로 저장하고, 회원가입 버튼을 눌렀을 때 1번만 비교하는 방식이었어요!^^

const [passWord, setPassWord] = useState()
const [rePassWord, setRePassWord] = useState()

// 비밀번호 저장
const onChangePassWord = (event) => {
    setPassWord(event.target.value);
    if(event.target.value !== ''){
        setPassWordError("");
    }
}

// 비밀번호확인 저장
const onChangeRePassWord = (event) => {
    setRePassWord(event.target.value);
    if(event.target.value !== ''){
        setRePassWordError("");
    }
}

// 회원가입눌렀을때, 비밀번호와 비밀번호확인이 일치하는지 비교하기
const onClickSign = () => {

    ...

    // 아래 '여기'를 채워보세요!^^ (비밀번호와 비밀번호확인이 일치하는지 비교하시면 되겠죠?!)
    if(여기){
        setRePassWordError("비밀번호를 확인해주세요")
    }

    ...   
}

 

1

윰이

해결완료했습니다 감사합니다~~!

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

40

1

댓글 기능 구현 중 질문드립니다.

0

66

1

쿠폰코드 발급

0

136

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

87

2

문의드립니다!! ㅠㅠ

0

102

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

77

2

_app.js 작성 이후로 에러가 발생하네요

0

95

2

학습자료

0

71

2

학습자료가 안열립니다.

0

50

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

61

0

기존강의 구매자, 업데이트 끝인가요?

0

110

3

업데이트 버전 수강

0

89

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

84

1

graphql 접속이 안됩니다.

0

101

2

const, let 사용 질문 드립니다.

0

70

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

122

2

회원가입 과제 피드백 부탁드립니다.

0

81

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

167

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

185

2

2분 44초 질문

0

132

3