1. 회원가입 예제
body 태그
<body>
<div id="container">
<h1>회원 가입</h1>
<form action="#" id="register">
<ul id="user-info">
<li>
<label for="user-id" class="field">아이디</label>
<input type="text" name="user-id" id="user-id" placeholder="4~15자리로 입력" required>
</li>
<li>
<label for="email" class="field">이메일</label>
<input type="email" name="email" id="email" required>
</li>
<li>
<label for="user-pw1" class="field">비밀번호</label>
<input type="password" name="user-pw1" id="user-pw1" placeholder="8자리 이상" required>
<span class="trans">문자로 변환</span>
</li>
<li>
<label for="user-pw2" class="field">비밀번호 확인</label>
<input type="password" name="user-pw2" id="user-pw2" required>
</li>
<li>
<label class="field">메일링 수신</label>
<label class="r"><input type="radio" value="yes" name="mailing">예</label>
<label class="r"><input type="radio" value="no" name="mailing">아니오</label>
</li>
</ul>
<ul id="buttons">
<li>
<input type="button" class="btn btnBlack" value="가입하기">
</li>
<li>
<input type="reset" class="btn btnGray" value="취소">
</li>
</ul>
</form>
</div>
</body>
stylesheet
#container{
width:600px;
margin:0 auto;
}
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:right;
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;
float:left;
}
.r {
line-height:55px;
}
#buttons > li {
display:inline-block;
}
input[type="button"], input[type="reset"] {
width:250px;
height:50px;
margin-right:10px;
border:1px solid #ccc;
background:#eee;
font-size:0.9em;
}
script 코드 작성
회원가입 페이지 입력 값 검증하기
1. [가입하기] 버튼을 클릭하면 아이디 글자 수 확인하기
2. 비밀번호 확인하기
1) 비밀번호 필드에 입력한 내용의 글자 수가 8자리 이상인지 확인
2) 비밀번호 확인 필드에 입력한 값이 비밀번호의 필드 값과 같은지 확인
3. 비밀번호 패스워드 변환 <-> 문자 변환
<head>
<link rel="stylesheet" href="css/register.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const frmRegister = document.getElementById('register'); // 폼태그
const btnSubmit = document.querySelector('.btnBlack'); // 가입 버튼
const userName = document.getElementById('user-id'); // id태그
const pw1 = document.querySelector('#user-pw1'); // 비밀번호1 필드
const pw2 = document.querySelector('#user-pw2'); // 비밀번호2 필드
btnSubmit.addEventListener('click', function () {
// 가입하기 버튼 클릭했을 때
if (userName.value.length > 15 || userName.value.length < 4) {
alert('4~15자리로 입력하세요.'); // 오류 메시지 출력
/*
select() : 사용자가 기존에 입력한 값을 선택
focus() : 사용자가 기존에 입력한 값을 지우고 새로운 값을 입력하도록 텍스트 필드에 커서를 가져다 놓음.
*/
userName.select();
return;
}
frmRegister.submit();
});
pw1.addEventListener('change', function () {
// 비번1 입력했을 때 오류 확인
if (pw1.value.length < 8) {
alert('비밀번호는 8자리 이상이어야 합니다.'); // 오류 메시지 표시
pw1.value='';
pw1.focus();
}
});
pw2.addEventListener('change', function () {
// 비번 2 입력했을 때 오류 확인
if (pw1.value !== pw2.value) {
alert('암호가 다릅니다. 다시 입력하세요.'); // 오류 메시지 표시
pw2.value = '';
pw2.focus();
}
});
const btnTrans = document.querySelector('span.trans');
// 비밀번호 문자열 변환 태그
btnTrans.addEventListener('click', function (e) {
if (pw1.getAttribute('type') === 'password') {
pw1.setAttribute('type', 'text');
e.currentTarget.textContent = '패스워드로 변환';
} else {
pw1.setAttribute('type', 'password');
e.currentTarget.textContent = '문자로 변환';
}
});
});
</script>
</head>
[ 내용 참고 : IT 학원 강의 ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] Ajax, JSON (0) | 2024.04.13 |
|---|---|
| [JavaScript] localStorage 객체 (0) | 2024.04.07 |
| [JavaScript] 주문서 작성 (0) | 2024.04.05 |
| [JavaScript] 드롭다운 목록, 체크박스, 라디오 버튼, 기본 이벤트 막기, 참가신청 명단 (0) | 2024.04.05 |
| [JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트 (0) | 2024.04.03 |