입력 필드 유효성 검사
상태 만들기
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
유효성 검사 함수 만들기
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const handleEmailChange = (e) => {
setEmail(e.target.value);
if (!validateEmail(e.target.value)) {
setError('이메일 형식을 확인해주세요.');
} else {
setError('');
}
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
setError('');
if (e.target.value.length < 6) {
setError('비밀번호는 6자리 이상으로 설정해주세요');
} else {
setError('');
}
};
const handleConfirmPasswordChange = (e) => {
setConfirmPassword(e.target.value);
setError('');
if (e.target.value.length < 6) {
setError('비밀번호는 6자리 이상으로 설정해주세요');
} else if (password !== e.target.value) {
setError('비밀번호가 일치하지 않습니다');
} else {
setError('');
}
};
실시간 에러 메시지 렌더링
{password !== confirmPassword && confirmPassword && (
<ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage>
)}
{error && <ErrorMessage>{error}</ErrorMessage>}
유효성 검사에 따른 버튼 활성화 조건부 렌더링
useEffect(() => {
if (email && password && confirmPassword && !error && password === confirmPassword && validateEmail(email)) {
setIsButtonDisabled(false);
} else {
setIsButtonDisabled(true);
}
}, [email, password, confirmPassword, error]);
'Programing > React' 카테고리의 다른 글
React 에서 자주 쓰이는 if문 패턴 (0) | 2024.06.24 |
---|---|
TanStack Query 기본 사용법 (0) | 2024.06.24 |
서버 통신으로 받은 사용자 인증 상태로 조건부 렌더링하기 (0) | 2024.06.19 |
Supabase 셋업 이후 TanStack Query 커스텀 훅으로 fetch 전역 공유하기 (0) | 2024.06.17 |
과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기 (0) | 2024.06.17 |
댓글