회원가입 만들기!
HTML
나는 form 안에 label, input 요소들을 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="css/main.css">
<script defer src="js/main.js"></script>
</head>
<body>
<h1>회원가입</h1>
<form>
<label for="id">아이디</label>
<input id="id" type="text">
<label for="pw">비밀번호</label>
<input id="pw" type="password">
<label for="confirm-pw">비밀번호 확인</label>
<input id="confirm-pw" type="password">
<label for="display-name">이름</label>
<input id="display-name" type="text">
<input type="button" value="회원가입" onclick="signUp();" class="btn">
</form>
</body>
</html>JS
signUp이라는 함수를 만들어서 if문을 사용하여서 만들었다.
- 가입시 id는 email형식이며, id, pw, confirmPw, dispalyName 4가지가
빈문자면 회원가입이 되지 않게 했다. - 정규식을 사용하여서 이메일형식이 맞는지 확인하게 했다.
- 이름의 길이는 2글자 이상이여야하고, 비밀번호는 8글자 이상이 되어야한다.
- 비밀번호가 일치하는지 확인하고, 모든 형식이 맞다면 회원가입이 완료되게 하였다.
function signUp() {
const id = document.getElementById("id");
const pw = document.getElementById("pw");
const confirmPw = document.getElementById("confirm-pw");
const dispalyName = document.getElementById("display-name");
const emailValid = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
const pwValid = /^.*(?=^.{8,16}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[~,!,@,#,$,*,(,),=,+,_,.,|]).*$/;
if(id.value === "" || pw.value === "" || confirmPw.value === "" || dispalyName.value === "") {
console.log("회원가입을 할 수 없습니다.")
} else if(!id.value.match(emailValid)) {
console.log('이메일 형식을 맞게 입력해주세요')
} else {
if (dispalyName.value.length < 2 ) {
console.log('이름은 2글자 이상 써야합니다.')
} else if (pw.value.length < 8) {
console.log('비밀번호는 8글자 이상 써야합니다.')
} else if (pw.value !== confirmPw.value) {
console.log('비밀번호를 확인해주세요!')
} else {
console.log('회원가입 완료')
}
}
}
회원가입을 만들면서...
js공부를 하면서 DOM을 연습하기 위해서 회원가입을 간단하게 만들어보았다.
<만들면서 깨달은점>
Growing front-end developer