Java Script & Type Script
25. [React] 뼈갈넣 회원가입 유효성 검사
쩰라
2023. 1. 28. 14:00
728x90
export default function SignUp() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmpassword, setConfirmpassword] = useState("");
const [username, setUserName] = useState("");
///유효성 검사 후 띄울 메세지
const [usernameMessage, setUsernameMessage] = useState("");
const [emailMessage, setEmailMessage] = useState("");
const [passwordMessage, setPasswordMessage] = useState("");
const [passwordConfirmMessage, setPasswordconfirmMessage] = useState("");
///유효성검사시에 이용할 useState 초기값
const [isUserName, setIsUserName] = useState(false);
const [isEmail, setIsEmail] = useState(false);
const [isPassword, setIsPassword] = useState(false);
const [isPasswordConfirm, setIsPasswordConfirm] = useState(false);
///1. 닉네임 유효성검사-2글자 이상 12자리 이하 특수문자불가
const onChangeName = useCallback((e) => {
const usenameRegex = /[^a-zA-Z0-9ㄱ-힣]/g;
setUserName(e.target.value);
if (usenameRegex.test(e.target.value)) {
setUsernameMessage("특수문자는 이용이 불가능합니다!");
setIsUserName(false);
} else if (e.target.value.length < 2) {
setUsernameMessage("2글자 이상 입력해주세요.");
setIsUserName(false);
} else if (e.target.value.length > 12) {
setUsernameMessage("12자리 이하로 입력해주세요");
setIsUserName(false);
} else {
setUsernameMessage("올바른 형식입니다.");
setIsUserName(true);
}
}, []);
//2. 이메일 유효성검사-알파벳과숫자,@포함필수
const onChangeEmail = useCallback((e) => {
///이메일정규식
const emailRegex =
/([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
const emailCurrent = e.target.value;
setEmail(emailCurrent);
if (!emailRegex.test(emailCurrent)) {
setEmailMessage("이메일형식을 확인해주세요!");
setIsEmail(false);
} else {
setIsEmail(true);
setEmailMessage("올바른 형식입니다.");
}
}, []);
///3. 패스워드 유효성검사-알파벳,숫자,특수문자 8자리이상 15자리 이하
const onChangePassword = useCallback((e) => {
///패스워드 정규식사용.
const passwordRegex =
/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/;
const passwordCurrent = e.target.value;
setPassword(passwordCurrent);
if (!passwordRegex.test(passwordCurrent)) {
setPasswordMessage(
"대문자+소문자+특수문자+숫자 조합으로 8~15자리로 입력해주세요!"
);
setIsPassword(false);
} else {
setPasswordMessage("올바른 형식입니다. ");
setIsPassword(true);
}
}, []);
///4. 비밀번호 재확인
const onChangePasswordConfirm = useCallback(
(e) => {
const passwordConfirmCurrent = e.target.value;
setConfirmpassword(passwordConfirmCurrent);
if (password === passwordConfirmCurrent) {
setPasswordconfirmMessage("올바르게 입력했습니다. ");
setIsPasswordConfirm(true);
} else {
setPasswordconfirmMessage(
"비밀번호가 일치하지 않습니다. 다시 확인해주세요."
);
setIsPasswordConfirm(false);
}
},
[password]
);
///버튼 클릭시 회원가입 submit
const onSubmit = useCallback(
async (e) => {
e.preventDefault();
try {
await axios({
method: "post",
url: "http://3.36.130.126/users/signup",
data: { username: username, email: email, password: password },
}).then((res) => {
console.log("response:", res);
if (res.status === 201) {
alert("회원가입이 완료되었습니다");
console.log("User profile", res.data.username, res.data.email);
window.location.replace("/");
}
});
} catch (err) {
console.error(err);
}
},
[email, username, password]
);
return (
<SwholeDiv>
<TopBar />
<SSignupForm onSubmit={onSubmit}>
<Simagelogo src={"img/logo-pink.png"} />
<SInput
autoFocus
required
onChange={onChangeName}
value={username}
placeholder="닉네임 2~12자리 입력(특수문자이용은 불가능합니다!)"
/>
{username.length > 0 && (
<Sspan className={`message ${isUserName ? "success" : "error"}`}>
{usernameMessage}
</Sspan>
)}
<SInput
required
onChange={onChangeEmail}
value={email}
placeholder="이메일 주소 입력"
/>
{email.length > 0 && (
<Sspan className={`message ${isEmail ? "success" : "error"}`}>
{emailMessage}
</Sspan>
)}
<SInput
type="password"
required
onChange={onChangePassword}
value={password}
placeholder="비밀번호 입력(대문자+소문자+특수문자+숫자 조합으로 8~15자리 입력해주세요!)"
/>
{password.length > 0 && (
<Sspan className={`message ${isPassword ? "success" : "error"}`}>
{passwordMessage}
</Sspan>
)}
<SInputbottom
type="password"
required
onChange={onChangePasswordConfirm}
value={confirmpassword}
placeholder="비밀번호 재확인"
/>
{confirmpassword.length > 0 && (
<Sspan
className={`message ${isPasswordConfirm ? "success" : "error"}`}
>
{passwordConfirmMessage}
</Sspan>
)}
<Sbutton
type="submit"
disabled={!(isUserName && isEmail && isPassword && isPasswordConfirm)}
>
회원가입
</Sbutton>
</SSignupForm>
<Copyright />
</SwholeDiv>
);
}스타일드컴포넌트는 생략....
const SSignupForm = styled.form`
margin: 100px auto auto auto;
display: flex;
flex-direction: column;
/* border: 1px solid black; */
height: 400px;
width: 500px;
padding: 20px;
/* gap: 15px;/ */
`;
const SInput = styled.input`
border: 1px solid rgba(216, 216, 216);
height: 40px;
border-bottom: none;
padding-left: 15px;
`;
const SInputbottom = styled.input`
border: 1px solid rgba(216, 216, 216);
height: 40px;
padding-left: 15px;
`;
const Sspan = styled.span`
font-size: 15px;
`;
const Sbutton = styled.button`
margin-top: 20px;
border: none;
height: 40px;
color: white;
font-weight: 700;
background-color: rgba(215, 215, 215);
cursor: pointer;
`;
const SwholeDiv = styled.div`
background-color: rgba(249, 249, 249);
height: 100%;
width: auto;
`;
const Simagelogo = styled.img`
height: 50px;
width: 120px;
/* justify-content: center; */
/* align-items: center; */
display: flex;
margin: -70px auto 50px auto;
`;하려다 언제 또 쓸지몰라.... 여기 붙였습니다
정규표현식
특수문자 체크 정규식
const regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g;
모든 공백 체크 정규식
const regExp = /\s/g;
숫자만 체크 정규식
const regExp = /[0-9]/g;
이메일 체크 정규식
const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
핸드폰번호 정규식
const regExp = /^\d{3}-\d{3,4}-\d{4}$/;
일반 전화번호 정규식
const regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
아이디나 비밀번호 정규식
const regExp = /^[a-z0-9_]{4,20}$/;
휴대폰번호 체크 정규식
const regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
728x90