퀴즈5 비밀번호 유효성 검증
비밀번호와 비밀번호 확인이 서로 일치하는지 검증하는 코드를 어떻게 짜야할 지 모르겠어요.. 현재 코드로 하면 에러가 납니다..! 봐주시면 감사하겠습니다ㅠㅠ 해당코드 //문제부분!!!!!!!!!!!!!!!!!!!!********* 으로 해놓았습니다!!
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>
</>
)
}
답변 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("비밀번호를 확인해주세요")
}
...
}
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





