📝 문제
위 사진과 같은 양식으로 만들어 보시오.
📌 해답
🔎 내 코드
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입양식</title>
<style>
#form{
display: flex;
justify-content: center;
margin: 20px;
}
#fieldset{
display: inline-block;
padding-right: 55px;
}
#fieldset td{
padding-bottom: 10px;
padding-right: 5px;
}
.button{
padding-left: 47px;
}
</style>
</head>
<body>
<form action="main.html" onsubmit="return validate()" id="form">
<fieldset id="fieldset">
<legend>회원 가입 양식</legend>
<table>
<tr>
<td>아이디</td>
<td><input type="text" id="in1"></td>
<td><button>중복확인</button></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" id="in2"></td>
<td id="text1"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" id="in3"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="in4"></td>
<td id="text2"></td>
</tr>
<tr>
<td>성별</td>
<td>
<label for="man">남</label><input type="radio" name="gender" id="man" value="man">
<label for="woman">여</label><input type="radio" name="gender" id="woman" value="woman">
</td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="tel" id="in5"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email"></td>
</tr>
<tr>
<td></td>
<td class="button">
<button type="reset">초기화</button>
<button type="submit" id="submitBtn">회원가입</button>
</td>
</tr>
</table>
</fieldset>
</form>
<script src="js/실습문제2(회원가입양식).js"></script>
</body>
</html>js
/* 아이디 : 값이 변했을 때
영어 소문자로 시작하고,
영어 대/소문자, 숫자, - , _ 로만 이루어진 6~14 글자 사이 문자열인지 검사
아이디 정규표현식 : (각자 작성)
- 형식이 일치할 경우
입력창의 배경색을 green 으로 변경
- 형식이 일치하지 않은 경우
입력창의 배경색을 red, 글자색을 white 로 변경*/
document.getElementById("in1").addEventListener("keyup", function(){
// 아이디 정규 표현식
const regExp = /^[a-z]{1}([a-z]|[A-Z]|[0-9]|\-|\_){5,13}$/;
const in1 = document.getElementById("in1");
if(regExp.test(this.value)){
in1.style.backgroundColor = "green";
} else{
in1.style.backgroundColor = "red";
in1.style.color = "white";
}
})
// ------------------------------------------------------------------
/* 비밀번호, 비밀번호 확인 : 키보드가 올라올 때
"비밀번호" 를 미입력한 상태에서 "비밀번호 확인"을 작성할 경우
"비밀번호 확인"에 작성된 내용을 모두 삭제하고
'비밀번호를 입력해주세요' 경고창 출력 후
focus 를 "비밀번호" 입력창으로 이동
*/
document.getElementById("in3").addEventListener("keyup", function(){
const in2 = document.getElementById("in2");
if(in2.value.trim().length == 0){
alert("비밀번호를 입력해주세요.");
this.value = "";
in2.focus();
}
})
// ------------------------------------------------------------------
/*
- 비밀번호가 일치할 경우
"비밀번호" 입력창 오른쪽에 "비밀번호 일치" 글자를 초록색으로 출력.
- 비밀번호가 일치하지 않을 경우
"비밀번호" 입력창 오른쪽에 "비밀번호가 불일치" 글자를 빨간색으로 출력
- 비밀번호가 작성되지 않은경우 오른쪽에 출력되는 문구 삭제
*/
document.getElementById("in3").addEventListener("keyup", function(){
const in2 = document.getElementById("in2");
const text1 = document.getElementById("text1");
if(this.value == in2.value){
text1.innerHTML = "비밀번호 일치";
text1.style.color = "green";
} else{
text1.innerHTML = "비밀번호 불일치";
text1.style.color = "red";
}
if(this.value.trim().length == 0){
text1.innerHTML = "";
}
})
// -------------------------------------------------------------
/* 이름 : 값이 변화했을 때
한글 2~5 글자 사이 문자열인지 검사.
- 형식이 일치할 경우
"이름" 입력창 오른쪽에 "정상입력" 글자를 초록색으로 출력.
- 형식이 일치할 경우
"이름" 입력창 오른쪽에 "한글만 입력하세요" 글자를 빨간색으로 출력.
*/
document.getElementById("in4").addEventListener("keyup", function(){
const regExp = /^[가-힣]{2,5}$/;
const text2 = document.getElementById("text2");
if(regExp.test(this.value)){
text2.innerHTML = "정상입력";
text2.style.color = "green";
} else{
text2.innerHTML = "한글만 입력하세요";
text2.style.color = "red";
}
if(this.value.trim().length == 0){
text2.innerHTML = "";
}
})
// -----------------------------------------------------------
/* 회원가입 버튼 클릭 시 : validate() 함수를 호출하여
성별이 선택 되었는지, 전화번호가 형식에 알맞게 작성되었는지 검사 */
function validate(){
/*- 성별이 선택되지 않은 경우
"성별을 선택해주세요." 경고창(==대화상자) 출력 후
submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함.*/
const man = document.getElementById("man");
const woman = document.getElementById("woman");
if(man.checked == false && woman.checked == false){
alert("성별을 선택해 주세요.");
return false;
}
/*
- 전화번호 형식이 올바르지 않을 경우
"전화번호의 형식이 올바르지 않습니다" 경고창(==대화상자) 출력 후
submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함.
*/
const regExp = /^[0-9]{3}\-[0-9]{4}\-[0-9]{4}$/;
const in5 = document.getElementById("in5");
if(regExp.test(in5.value) == false){
alert("전화번호의 형식이 올바르지 않습니다.");
return false;
}
}🔎 다른 코드
html
내 코드와 비교했을 때 style 부분이 보다 간결하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입양식 답</title>
<style>
fieldset{ width: 430px;}
.btn-area{ text-align: right; }
td{ padding: 5px; }
.confirm{ color: green;}
.error{ color: red;}
</style>
</head>
<body>
<form action="main.html" method="get" onsubmit="return validate()">
<fieldset>
<legend>회원 가입 양식</legend>
<table>
<tr>
<td>아이디</td>
<td>
<input type="text" id="inputId">
</td>
<td>
<button type="button">중복확인</button>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" id="inputPw">
</td>
<td>
<span id="pwMessage"></span>
</td>
</tr>
<tr>
<td>비밀번호확인</td>
<td>
<input type="password" id="inputPwConfirm">
</td>
<td></td>
</tr>
<tr>
<td>이름</td>
<td>
<input type="text" id="inputName">
</td>
<td>
<span id="nameMessage"></span>
</td>
</tr>
<tr>
<td>성별</td>
<td>
<label> 남 <input type="radio" name="gender" value="m"></label>
<label> 여 <input type="radio" name="gender" value="f"></label>
</td>
<td></td>
</tr>
<tr>
<td>전화번호</td>
<td>
<input type="text" id="inputTel">
</td>
<td></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" id="inputEmail">
</td>
<td></td>
</tr>
<tr>
<td></td>
<td class="btn-area">
<button type="reset">초기화</button>
<button>회원가입</button>
</td>
<td></td>
</tr>
</table>
</fieldset>
</form>
<script src="js/실습문제2답안(회원가입양식).js"></script>
</body>
</html>js
내 코드와 비교했을 때 classList.add() / classList.remove()를 사용하는 점이 다르다.
/* 아이디 : 값이 변했을 때
영어 소문자로 시작하고,
영어 대/소문자, 숫자, - , _ 로만 이루어진 6~14 글자 사이 문자열인지 검사
아이디 정규표현식 : (각자 작성)
- 형식이 일치할 경우
입력창의 배경색을 green 으로 변경
- 형식이 일치하지 않은 경우
입력창의 배경색을 red, 글자색을 white 로 변경*/
const inputId = document.getElementById("inputId");
const regExp = /^[a-z]{1}(\d|\w|\-|_){5,13}$/;
inputId.addEventListener("keyup", function(){
if(regExp.test(inputId.value)){
this.style.backgroundColor = "green";
} else{
this.style.background = "red";
this.style.color = "white";
}
})
// ------------------------------------------------------------------
/* 비밀번호, 비밀번호 확인 : 키보드가 올라올 때
"비밀번호" 를 미입력한 상태에서 "비밀번호 확인"을 작성할 경우
"비밀번호 확인"에 작성된 내용을 모두 삭제하고
'비밀번호를 입력해주세요' 경고창 출력 후
focus 를 "비밀번호" 입력창으로 이동
*/
const inputPw = document.getElementById("inputPw");
const inputPwConfirm = document.getElementById("inputPwConfirm");
inputPwConfirm.addEventListener("keyup", function(){
if(inputPw.value.length == 0){
this.value = "";
alert("비밀번호를 입력해주세요");
inputPw.focus();
}
});
// ------------------------------------------------------------------
/*
- 비밀번호가 일치할 경우
"비밀번호" 입력창 오른쪽에 "비밀번호 일치" 글자를 초록색으로 출력.
- 비밀번호가 일치하지 않을 경우
"비밀번호" 입력창 오른쪽에 "비밀번호가 불일치" 글자를 빨간색으로 출력
- 비밀번호가 작성되지 않은경우 오른쪽에 출력되는 문구 삭제
*/
const pwMessage = document.getElementById("pwMessage");
inputPw.addEventListener("keyup", function(){
if( (inputPw.value == inputPwConfirm.value) && inputPw.value.length != 0 ){
pwMessage.innerText = "비밀번호 일치";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
} else{
pwMessage.innerText = "비밀번호 불일치";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
}
if( inputPw.value.length == 0 && inputPwConfirm.value.length == 0 ){
pwMessage.innerText = "";
}
});
inputPwConfirm.addEventListener("keyup", function(){
if( (inputPw.value == inputPwConfirm.value) && inputPw.value.length != 0 ){
pwMessage.innerText = "비밀번호 일치";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
} else{
pwMessage.innerText = "비밀번호 불일치";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
}
if( inputPw.value.length == 0 && inputPwConfirm.value.length == 0 ){
pwMessage.innerText = "";
}
});
// -------------------------------------------------------------
/* 이름 : 값이 변화했을 때
한글 2~5 글자 사이 문자열인지 검사.
- 형식이 일치할 경우
"이름" 입력창 오른쪽에 "정상입력" 글자를 초록색으로 출력.
- 형식이 일치할 경우
"이름" 입력창 오른쪽에 "한글만 입력하세요" 글자를 빨간색으로 출력.
*/
const inputName = document.getElementById("inputName");
const nameMessage = document.getElementById("nameMessage");
inputName.addEventListener("keyup", function(){
const regExp = /^[가-힣]{2,5}$/;
if(regExp.test(inputName.value)){
nameMessage.innerText = "정상입력";
nameMessage.style.color = "green";
} else {
nameMessage.innerText = "한글만 입력하세요";
nameMessage.style.color = "red";
}
if(inputName.value.length == 0){
nameMessage.innerText = "";
}
})
// -----------------------------------------------------------
/* 회원가입 버튼 클릭 시 : validate() 함수를 호출하여
성별이 선택 되었는지, 전화번호가 형식에 알맞게 작성되었는지 검사 */
function validate(){
/*- 성별이 선택되지 않은 경우
"성별을 선택해주세요." 경고창(==대화상자) 출력 후
submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함.*/
const gender = document.getElementsByName("gender");
if(!gender[0].checked && !gender[1].checked){
alert("성별을 선택해 주세요.");
return false;
}
/*
- 전화번호 형식이 올바르지 않을 경우
"전화번호의 형식이 올바르지 않습니다" 경고창(==대화상자) 출력 후
submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함.
*/
const tel = document.getElementById("inputTel");
const regExp = /^[0][0-9]{1,2}\-[0-9]{3,4}\-[0-9]{4}$/;
// 전화번호를 입력하지 않았을 때
// "전화번호를 입력해 주세요." 경고창 출력
if(tel.value.length == 0){
alert("전화번호를 입력해 주세요.");
return false;
}
if(!regExp.test(tel.value)){
alert("전화번호의 형식이 올바르지 않습니다.");
return false;
}
}
풀스택 개발자 기록집 📁