회원가입이나 로그인을 하기 전에 이메일/아이디와 비밀번호의 유효성을 검증할 정규식을 정리해보려고 한다.
const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;
const passwordRegEx = /^[A-Za-z0-9]{8,20}$/
/^ : 시작
$/ : 끝
[A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작
([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음
* : 문자 또는 숫자가 0개 이상 나타남
@가 중간에 반드시 들어가야 함
도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음
. 이 최소한 하나는 반드시 들어가야 함
.뒤에 com과 같은 최상위 도메인이 들어갈 자리 2-3자리 지정
+ 참고) i : 전체에 대해서 대소문자를 구분하지 않음
//Signup.jsx
const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState("");
const [passwordChk, setPasswordChk] = React.useState("");
//email& 비밀번호 정규식
const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/i;
const passwordRegEx = /^[A-Za-z0-9]{8,20}$/
const emailCheck = (username) => {
return emailRegEx.test(username); //형식에 맞을 경우, true 리턴
}
const passwordCheck = (password) => {
if(password.match(passwordRegEx)===null) { //형식에 맞지 않을 경우 아래 콘솔 출력
console.log('비밀번호 형식을 확인해주세요');
return;
}else{ // 맞을 경우 출력
console.log('비밀번호 형식이 맞아요');
}
}
const passwordDoubleCheck = (password, passwordChk) => {
if(password !== passwordChk){
console.log('비밀번호가 다릅니다.');
return;
}else{
console.log('비밀번호가 동일합니다');
}
}
<SingUpPage>
<Text>반가워요! 이메일과 비밀번호를 <br />입력해주세요. 😀</Text>
<Input
_onChange={(e)=>{setUsername(e.target.value);
emailCheck(e.target.value)}}
placeholder="이메일(아이디)" name="signup_id" type="email"></Input>
<Input
_onChange={(e)=>{setPassword(e.target.value);
passwordCheck(e.target.value)}}
placeholder="비밀번호" type="password" name="signup_pwd"></Input>
<Input
_onChange={(e)=>{setPasswordChk(e.target.value);
passwordDoubleCheck(password, e.target.value)}}
placeholder="비밀번호 확인" type="password" name="signup_pwd_check"></Input>
<Text >비밀번호는 영문 대소문자, 숫자를 혼합하여 8~20자로 입력해주세요</Text>
<Button onClick={() => {showNextPage()}}>다음으로</Button>
</SingUpPage>