-정규식이란 ?
회원가입 폼에서 사용되는 정규식은 입력한 정보가 특정한 형식에 맞는지를 검사하는 패턴이다. 이를 통해 회원가입 시 입력되는 정보의 유효성을 검사하고, 잘못된 입력을 방지할 수 있다.
//현재 이메일 확인
const handleEmail = (e) => {
const nowId = e.target.value;
const idRegex =
/([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!idRegex.test(nowId)) {
setEmErroMsg("*이메일 형식에 맞춰서 작성해주세요.");
} else {
setImErroMsg("");
}
};
현재 유저가 타이핑 할 때 실시간을 정규식에 맞는지 안맞는지 코드를 작성하였다 .
input 에 onChange 이벤트를 이용하여 현재 유저의 value를 e.target.value로 가져와 검사해주었다
idRegex 정규식을 정의하여 test () 메서드를 이용하여 검사하여 정규식이 맞지 않을 때는 setImmErroMsg state 함수에 저장하여 에러메세지를 띄우게 하였다 !
패스워드도 같은 방식으로 작성하였다!
//현재 패스워드 확인
const handlePw = (e) => {
const nowPw = e.target.value;
const pwRegex = /^[A-Za-z0-9]{8,20}$/;
if (!pwRegex.test(nowPw)) {
setPwErroMsg(
"*비밀번호는 영문 대소문자, 숫자를 혼합하여 8~20자로 입력해주세요"
);
} else {
setPwErroMsg("");
}
};
결과물 -