코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<link rel="stylesheet" href="css/회원가입.css">
<script defer src="js/회원가입.js"></script>
</head>
<body>
<div id="container">
<h1>회원 가입</h1>
<hr>
<form action="#" id="register">
<ul id="user-info">
<li>
<label for="user-id" class="field">아이디</label>
<input type="text" id="user-id" placeholder="4~15자리의 영문과 숫자로 입력" required>
</li>
<li>
<label for="email" class="field">이메일</label>
<input type="email" id="email" required>
</li>
<li>
<label for="user-pw1" class="field">비밀번호</label>
<input type="password" id="user-pw1" placeholder="8자리 이상" required>
</li>
<li>
<label for="user-pw2" class="field">비밀번호 확인</label>
<input type="password" id="user-pw2" required>
</li>
<li>
<label class="field">메일링 수신</label>
<label class="r"><input type="radio" value="yes" name="mailing" checked>예</label>
<label class="r"><input type="radio" value="no" name="mailing">아니오</label>
</li>
</ul>
<ul id="buttons">
<li>
<button type="submit" class="btn btnBlack">가입하기</button>
</li>
<li>
<button type="reset" class="btn btnGray">취소</button>
</li>
</ul>
</form>
</div>
</body>
</html>
javascript
// 아이디, 비밀번호, 비밀번호 확인 태그 받기
let id = document.querySelector("#user-id");
let pwd = document.querySelector("#user-pw1");
let ckPwd = document.querySelector("#user-pw2");
// 각 태그에 변화 시 체크 조건 실행
id.onchange = checkId;
pwd.onchange = checkPwd;
ckPwd.onchange = comparePwd;
// 아이디 체크조건
function checkId() {
if (id.value.length > 15 || id.value.length < 4) {
alert("4~15 자리의 아이디를 입력하세요 :)");
id.select();
}
}
// 비밀번호 체크조건
function checkPwd() {
if (pwd.value.length < 8) {
alert("8 자리 이상의 비밀번호를 입력하세요 :)");
document.querySelector("#user-pw1").value = "";
pwd.focus();
}
}
// 비밀번호 확인 체크조건
function comparePwd() {
if (pwd.value != ckPwd.value) {
alert("비밀번호가 일치하지 않습니다 :)");
document.querySelector("#user-pw2").value = "";
ckPwd.focus();
}
}
css
#container{
width:600px;
margin:0 auto;
}
h1{text-align: center;}
ul {
list-style:none;
}
ul li {
clear:both;
}
.field {
float:left;
width:100px;
font-weight:bold;
font-size:0.9em;
line-height: 55px;
text-align:center;
margin-right:15px;
}
input[type="text"], input[type="password"], input[type="email"] {
float:left;
width:350px;
height:35px;
border:1px solid #aaa;
border-radius:5px;
padding:5px;
margin:10px 0;
}
.r {
line-height:55px;
}
#buttons > li {
display:inline-block;
}
button {
width:250px;
height:50px;
margin-right:10px;
border:1px solid #ccc;
background:#eee;
font-size:0.9em;
}
실행화면
- Just Do It -
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 다양한 함수 선언 방법 (0) | 2022.07.20 |
|---|---|
| [JavaScript] 체크리스트 만들기 (0) | 2022.07.20 |
| [JavaScript] Date 객체 이용하여 기념일 계산하기 (0) | 2022.07.20 |
| [JavaScript] setInterval 메서드 이용해 타이머 만들기 (0) | 2022.07.20 |
| [JavaScript] 배열 (0) | 2022.07.20 |