반응형
Q. 회원가입 웹페이지에서 '전송하기' 버튼을 클릭 할 시 페이지 리로드 발생하지 않고 ,
'회원가입 페이지'에서 입력 한 정보 웹에 띄우기!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 페이지</title>
<link rel="stylesheet" href="style.css">
<script src="./jquery-3.7.1.js"></script>
</head>
<body>
<form id="webform">
<table id="joinTable">
<tr>
<td>아이디</td>
<td>
<input type="text" placeholder="아이디를 입력하세요" id="inputId">
<button id="idCheck">중복체크</button>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" placeholder="비밀번호를 입력하세요" id="pwcheckMain" size="18px"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td>
<input type="password" placeholder="비밀번호를 입력하세요" id="pwcheckSub" size="18px">
<font id="chkNotice" size="2"></font>
</td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" placeholder="이름을 입력하세요" id="personName" onKeyUp="checkLength(this);" onKeyDown="checkLength(this)";></td>
</tr>
<tr>
<td>전화번호</td>
<td id="phoneNumber">
<select id="choiceNum">
<option value="선택">선택</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="010">010</option>
</select>
<input type="number" id="numSub1" oninput="maxLengthCheck(this)">
<input type="number" id="numSub2" oninput="maxLengthCheck(this)">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" placeholder="주소를 입력해주세요" size="35px" id="adrFirst"></td>
</tr>
<tr>
<td>세부 주소</td>
<td><input type="text" placeholder="세부 주소를 입력해주세요" size="35px" id="adrSecond"></td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input type="email" placeholder="이메일을 입력해주세요" size="35px" id="personEmail">
<button id="emailCheck">중복체크</button>
</td>
</tr>
<tr>
<td>사진 올리기</td>
<td><input type="file" id="fileInput"></td>
</tr>
<tr>
<td>좋아하는 가수</td>
<td>
<input type="checkbox" class="checkbox" id="b2b" value="비투비" name="checkboxlist">
<label for="b2b">비투비</label>
<input type="checkbox" class="checkbox" id="high" value="하이라이트" name="checkboxlist">
<label for="high">하이라이트</label>
<input type="checkbox" class="checkbox" id="spider" value="거미" name="checkboxlist">
<label for="spider">거미</label>
<input type="checkbox" class="checkbox" id="jung" value="정은지" name="checkboxlist">
<label for="jung">정은지</label>
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" id="남" class="gender" name="gender" value="남">
<label for="남">남</label>
<input type="radio" id="여" class="gender" name="gender" value="여">
<label for="여">여</label>
</td>
</tr>
<tr>
<td>글쓰기</td>
<td><textarea rows="6" cols="50" id="note"></textarea></td>
</tr>
<tr>
<td colspan="2" id="bts">
<button id="send">전송</button>
<button id="reset">초기화</button>
</td>
</tr>
</table>
<table id="completeTable">
<tr>
<td>아이디</td>
<td id="comId"></td>
</tr>
<tr>
<td>비밀번호</td>
<td id="comPw"></td>
</tr>
<tr>
<td>이름</td>
<td id="comName"></td>
</tr>
<tr>
<td>전화번호</td>
<td id="comNum"></td>
</tr>
<tr>
<td>주소</td>
<td id="comAdr"></td>
</tr>
<tr>
<td>세부 주소</td>
<td id="comAdrDetail"></td>
</tr>
<tr>
<td>E-mail</td>
<td id="comEmail"></td>
</tr>
<tr>
<td>사진 올리기</td>
<td id="comFile"></td>
</tr>
<tr>
<td>좋아하는 가수</td>
<td id="comLikeSinger"></td>
</tr>
<tr>
<td>성별</td>
<td id="comGender"></td>
</tr>
<tr>
<td>글쓰기</td>
<td id="comNote"></td>
</tr>
<tr id="backKey">
<td colspan="2">
<button id="backBt">뒤로가기</button>
</td>
</tr>
</table>
</form>
<script src="app.js"></script>
</body>
</html>
CSS
table {
width: 550px;
border: 1px solid black;
margin-left: 10%;
margin-top: 5%;
}
tr,
td {
border: 1px solid black;
}
textarea {
margin: 4px 1px 1px 3px;
resize: none
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
width: 3em;
}
#bts {
border: none;
text-align: center;
}
#send {
margin-right: 10px;
}
#backKey{
display: flex;
justify-content: center;
}
javaScript
// 회원가입 페이지는 보이고 가입한 정보 페이지는 숨기고
$('#joinTable').show();
$('#completeTable').hide();
const inputId = $('#inputId');
const idBt = $('#idCheck');
let idChecked = 'n'
let emailBtChecked = 'n'
const pwMain = $('#pwcheckMain');
const pwSub = $('#pwcheckSub');
// 아이디 중복검사 클릭 시 발생하는 이벤트
idBt.on('click', function () {
event.preventDefault(); // 이 구문 없을 시 '아이디' 입력 후 초기화가 이루어짐
checkId();
});
// 아이디 중복검사 클릭 시 실행되는 함수
function checkId() {
const idValue = inputId.val();
const pattern = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$");
if (idValue === '' || !pattern.test(idValue)) {
alert('아이디는 영소문자 + 숫자를 조합하여 4글자 이상 입력해주세요')
idChecked = 'n'
inputId.focus(); // 아이디 필드로 포커스가 안되고 있음..
return false;
}
else {
alert('사용 가능한 아이디입니다.')
idChecked = 'y'
pwMain.focus(); // 비밀번호 필드로 포커스가 안되고 있음...
return true;
};
};
// 비밀번호 2개의 값 비교해서 사용자에게 일치 여부 알려주기
$(function () {
$('#pwcheckMain').keyup(function () {
$('#chkNotice').html('');
});
$('#pwcheckSub').keyup(function () {
// 비밀번호 정규식
// let passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{4}$/;
// if (!passwordRegex.test($('#pwcheckMain').val())) {
// $('#chkNotice').html('대소문자 및 숫자를 조합하여 4글자 이상 입력해주세요');
// $('#chkNotice').attr('color', '#f82a2aa3');
// } else
if ($('#pwcheckMain').val() !== $('#pwcheckSub').val()) {
$('#chkNotice').html('비밀번호 일치하지 않음');
$('#chkNotice').attr('color', '#f82a2aa3');
} else {
$('#chkNotice').html('비밀번호 일치함');
$('#chkNotice').attr('color', '#199894b3');
}
});
});
// 이름 4글자로 제한 두기
function checkLength() {
const comment = $('#personName');
if (comment.val().length > 4) {
comment.blur();
comment.val(comment.val().substring(0, 4));
comment.focus();
return false;
}
};
// 전화번호 중간, 끝 숫자만 4자리로 제한 두기
$(function () {
$('#numSub1, #numSub2').on('input', function () {
let value = $(this).val();
// 숫자가 아닌 문자를 제거
value = value.replace(/[^0-9]/g, '');
// 길이를 4글자로 제한
if (value.length > 4) {
value = value.substring(0, 4);
}
// 수정된 값을 입력 필드에 다시 설정
$(this).val(value);
});
});
// 이메일 중복확인 시 발생하는 이벤트
const emailBt = $('#emailCheck');
emailBt.on('click', function () {
event.preventDefault();
emailCheck();
})
// 이메일 정규식
function emailCheck() {
const email = $('#personEmail').val();
const emailReguler = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!emailReguler.test(email)) {
emailBtChecked ='n'
alert("이메일 주소가 유효하지 않습니다")
$('#personEmail').focus();
return false;
}
else {
emailBtChecked = 'y'
alert("사용가능한 이메일 주소입니다")
};
};
// 체크박스 선택 시 선택 된 체크박스의 value 값 consol로 찍기
$(function () {
$('.checkbox').click(function(){
singerClick(this);
});
});
function singerClick(checkbox) {
console.log($(checkbox).val());
}
// 라디오버튼 선택 시 선택 된 라디오버튼의 value 값 consol로 찍기
$(function () {
$('.gender').click(function(){
genderClick(this);
});
});
function genderClick(gender) {
console.log($(gender).val());
}
//전송 버튼 클릭 시
$('#send').on('click', function () {
event.preventDefault()
updateData();
});
function updateData() {
const idValid = $('#inputId').val();
const pwMain = $('#pwcheckMain').val();
const choiceNum = $('#choiceNum').val();
const numSub1 = $('#numSub1').val();
const numSub2 = $('#numSub2').val();
const pwSub = $('#pwcheckSub').val();
const personName = $('#personName').val();
const adrFirst = $('#adrFirst').val();
const adrSecond = $('#adrSecond').val();
const personEmail = $('#personEmail').val();
const note = $('#note').val();
//체크박스(가수) 어떤거 선택했는지 값 확인
const selectedCheckboxes = $('.checkbox:checked').map(function() {
return this.value;
}).get();
// 성별 선택 값 확인
const selectedRadio = $('.gender:checked').val();
const file = $('#fileInput')[0].files[0];
const fileName = file ? file.name : '';
if (idValid === '') {
alert('아이디를 입력해주세요.');
$('#inputId').focus();
return false;
} else if (idChecked === 'n') {
alert('아이디 중복 검사를 실행해주세요.');
$('#idCheck').focus();
return false;
} else if (pwMain === '' | pwSub === '') {
alert('비밀번호를 입력해주세요.');
$('#pwcheckMain').focus();
return false;
} else if (personName === '') {
alert('이름을 확인해주세요.');
$('#personName').focus();
return false;
} else if (choiceNum === '선택' || numSub1 === '' || numSub2 === '') {
alert('전화번호를 확인해주세요.');
return false;
} else if (adrFirst === '') {
alert('주소를 입력해주세요');
$('#adrFirst').focus();
return false;
} else if (adrSecond === '') {
alert('세부 주소를 입력해주세요');
$('#adrSecond').focus();
return false;
} else if (personEmail === '') {
alert('이메일을 입력해주세요');
$('#personEmail').focus();
return false;
} else if (emailBtChecked === 'n') {
alert('이메일 중복 검사를 실행해주세요');
return false;
} else {
alert('회원가입을 완료했습니다.')
console.log("아이디 : ", idValid);
console.log("비밀번호 : ", pwMain);
console.log("이름 : ", personName);
console.log("전화번호 : ", choiceNum + '-' + numSub1 + '-' + numSub2);
console.log("주소 : ", adrFirst);
console.log("세부주소 : ", adrSecond);
console.log("이메일 : ", personEmail);
console.log("글쓰기 : ", note);
console.log("선택된 체크박스 : ", selectedCheckboxes.join(', '));
console.log("선택된 라디오 버튼 : ", selectedRadio);
console.log("선택된 파일 이름 : ", fileName);
init(idValid, pwMain, personName, choiceNum, numSub1, numSub2, adrFirst, adrSecond, personEmail, fileName, selectedCheckboxes, selectedRadio, note);
}
$('#return').on("click", function() {
init('','','','','','','','');
});
}
function init(_id, _pwM, _name, _choiceNum, _numSub1, _numSub2, _adrF, _adrS, _email, _fileName, _checkboxes, _radio, _note) {
$('#inputId').val(_id);
$('#pwcheckMain').val(_pwM);
$('#personName').val(_name);
$('#choiceNum').val(_choiceNum);
$('#numSub1').val(_numSub1);
$('#numSub2').val(_numSub2);
$('#adrFirst').val(_adrF);
$('#adrSecond').val(_adrS);
$('#personEmail').val(_email);
$('#note').val(_note);
$('#comId').text(_id);
$('#comPw').text(_pwM);
$('#comName').text(_name);
$('#comNum').text(_choiceNum + '-' + _numSub1 + '-' + _numSub2);
$('#comAdr').text(_adrF);
$('#comEmail').text(_email);
$('#comAdrDetail').text(_adrS);
$('#comNote').text(_note);
$('#comLikeSinger').text(_checkboxes.join(', '));
$('#comGender').text(_radio);
$('#comFile').text(`${_fileName}`);
if(_id == '' && _pwM == '' && _name == '' && _choiceNum == '선택' && _numSub1 == '' && _numSub2 == '' && _num == '' && _adrF == '' && _adrS == '' && _email == '' && _note == '') {
$('#joinTable').show();
$('#completeTable').hide();
} else {
$('#joinTable').hide();
$('#completeTable').show();
}
}반응형
'취미 공부 > Practice' 카테고리의 다른 글
| 회원가입 페이지 연습 (4) | 2024.09.24 |
|---|---|
| 부트스트랩 연습 (0) | 2024.09.24 |
| (진행 중)_스노우_팀장님 프로젝트_FE (0) | 2024.06.14 |
| 7주차 스노우 DAY01 팀장님 문제 - 20240617 완성 (1) | 2024.06.10 |
| 1주차 - Day04 [당근마켓 채팅방 클론 코딩] (3) | 2024.05.03 |
