안녕하세요 !
이번 글은 지난 글에서 작성했던 정규표현식을 사용해서 회원가입 양식들의 유효성 검사를 완성시켜보겠습니다.
정규표현식에 대한 설명은 지난 글을 참고해주세요 !
[HTML/CSS/JS] 정규표현식 작성해보기
안녕하세요 ! 이번 글에서는 HTML에 JS를 이용해서 유효성 검사를 해보도록 하겠습니다 ! 유효성 검사를 할때 if문과 같은 조건문을 일일히 써주는 방법도 있지만, 정규 표현식을 사용하게되면 더
preparingforme-n-us.tistory.com
지난 글에서는 아이디, 비밀번호, 이메일, 이름, 주민등록번호, 전화번호를 처리했습니다.
지난 글에 첨부했던 코드를 수정하여 다른 양식들도 유효성 검사를 완성시켰습니다.
이번엔 js파일을 외부로 빼서 html에 연결하여 작성했습니다.
다음은 유효성 검사를 진행할 리스트들입니다.
- 모든 값의 null값 처리.
- 아이디와 비밀번호가 일치하지 않도록 처리.
- 주소 api를 이용하여 우편번호와 주소지 입력받도록 처리.
- 관심분야의 체크박스가 아무것도 체크되지 않았을 경우 처리.
- 잘못 입력된 부분 초기화 및 커서 이동 처리.
- 주민등록번호 입력 시 생일 자동 입력 처리.
위에 작성된 리스트를 통과하면 메일창으로 넘어가도록 작성하였습니다.
+ 주민등록번호에는 공식이 있는데 공식이 적용되었는지, 주민등록번호 유효성 검사를 해주는 코드도 포함시켜 작성했습니다. 주민등록번호를 입력 후 회원가입 버튼을 누르면 생일 입력란에 자동으로 값이 전달되도록 하였습니다.
html
<html>
<head>
<title>회원가입 유효성 검사 HTML</title>
<script src="prac.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
<form>
<table width="60%" heigjt="60%" border="1" align="center">
<tr>
<td colspan="3" align="center" bgcolor="#a88fe3">회원 기본 정보</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>아이디 : </b></td>
<td colspan="3"><input type="id" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>비밀번호 : </b></td>
<td colspan="3"><input type="password" id="pw"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>비밀번호 확인 : </b></td>
<td colspan="3"><input type="password" id="pw2"></td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>메일주소 : </b></td>
<td colspan="3"><input type="email" id="email">예) id@domain.com</td>
</tr>
<td align="center" height="100" bgcolor="#dfd8f0"><b>주소 : </b></td>
<td colspan="3"><input type="text" id="zip-code" placeholder="우편번호">
<input type="button" onclick="kakaoMap()" value="우편번호 찾기"><br>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly><br>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px"></td>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>이름 : </b></td>
<td colspan="3"><input type="name" id="name"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#a88fe3"><b>개인 신상 정보</b></td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>주민등록번호 : </b></td>
<td width="70%"><input type="text" name="idNum1" id="idNum1"
size="10" maxlength="6">-</input><input type="password"
name="idNum2" id="idNum2" size="10" maxlength="7">예) 123456-1234567 </td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>전화번호 : </b></td>
<td colspan="3"><input type="phone" id="phone"> 예) 010-1234-5678</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>생일 : </b></td>
<td colspan="3"><input type="year" id ="year" readonly>년
<select name="month" id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>월
<select name="day" id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
일</td>
</tr>
<tr>
<td align="center" bgcolor="#dfd8f0"><b>관심분야 : </b></td>
<td colspan="3">
<input type="checkbox" name="interest" value="컴퓨터">컴퓨터
<input type="checkbox" name="interest" value="인터넷">인터넷
<input type="checkbox" name="interest" value="여행">여행
<input type="checkbox" name="interest" value="영화감상">영화감상
<input type="checkbox" name="interest" value="음악감상">음악감상
</td>
</tr>
<tr rowspan="2">
<td align="center" bgcolor="#dfd8f0"><b>자기소개 : </b></td>
<td colspan="3"><textarea name="intro" rows="5" cols="50" id="intro"></textarea></td>
</tr>
</table><br>
<div align="center">
<button type="button" onclick="return isThatRight();">
회원가입</button>
<button type="reset">다시입력</button>
</div>
</form>
</body>
</html>
js
function kakaoMap() {
new daum.Postcode( {
oncomplete: function( data ) { // 콜백함수 -> 이벤트 처리시 변경된 정보를 객체한테 전달
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
}
} ).open();
}
function isThatRight(){
let inputId = document.getElementById('id');
let inputPw = document.getElementById('pw');
let inputPw2 = document.getElementById('pw2');
let inputEmail = document.getElementById('email');
let inputZip = document.getElementById('zip-code');
let inputAddr = document.getElementById('address-2'); // 상세주소
let inputName = document.getElementById('name');
let inputIdNum1 = document.getElementById('idNum1');
let inputIdNum2 = document.getElementById('idNum2');
let inputPhone = document.getElementById('phone');
let inputCheck = document.getElementsByName('interest');
let inputYear = document.getElementById('year');
let inputMonth = document.getElementById('month');
let inputDay = document.getElementById('day');
let inputIntro = document.getElementById('intro');
// 주민 번호 앞/뒷자리
let arrIdNum1 = new Array();
let arrIdNum2 = new Array();
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~12자리인지 검사
let regexrId = /^[a-zA-Z0-9]{4,12}$/;
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~12자리인지 검사
let regexrPw = /^[a-zA-Z0-9]{4,12}$/;
// 이메일 형식
let regexrEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
// 이름 형식
let regexrName = /^[가-힣]{2,4}$/;
// 전화 번호 형식
let regexrPhone = /\d{3}-\d{3,4}-\d{4}/g;
// 아이디 유효성 검사
if(inputId.value == ""){
alert('아이디를 입력해주세요.');
inputId.focus();
return false;
}else if(!regexrId.test(inputId.value)){
alert("아이디는 대소문자 또는 숫자로 시작하고 끝나며 4~12자리로 입력해야합니다.");
inputId.value = "";
inputId.focus();
return false;
}
// 비밀번호 유효성 검사
if(inputPw.value == ""){
alert('비밀번호를 입력해주세요.');
inputPw.focus();
return false;
}else if(!regexrPw.test(inputPw.value)){
alert("비밀번호는 대소문자 또는 숫자로 시작하고 끝나며 4~12자리로 입력해야합니다.");
inputPw.value = "";
inputPw.focus();
return false;
}else if (inputPw.value == inputId.value) {
alert('아이디와 비밀번호는 동일할 수 없습니다.');
inputPw.value = "";
inputPw2.value = "";
inputPw.focus();
return false;
}else if (inputPw.value !== inputPw2.value) {
alert('비밀번호가 일치하지 않습니다.');
inputPw2.value = "";
inputPw2.focus();
return false;
}
// 이메일 유효성 검사
if(inputEmail.value == ""){
alert('이메일을 입력해주세요.');
inputEmail.focus();
return false;
}else if(!regexrEmail.test(inputEmail.value)){
alert("이메일이 올바르지 않습니다.");
inputEmail.value = "";
inputEmail.focus();
return false;
}
// 주소 유효성 검사
if(inputZip.value == ""){
alert('우편번호를 입력해주세요.');
return false;
}else if(inputAddr.value == ""){
alert('상세주소를 입력해주세요.');
inputAddr.focus();
return false;
}
// 이름 유효성 검사
if(inputName.value == ""){
alert('이름을 입력해주세요.');
inputName.focus();
return false;
}else if(!regexrName.test(inputName.value)){
alert("이름이 올바르지 않습니다.");
inputName.value = "";
inputName.focus();
return false;
}
// 주민등록번호 유효성 검사
if(inputIdNum1.value == ""){
alert('주민번호 앞자리를 입력해주세요.');
inputIdNum1.focus();
return false;
}else if(inputIdNum2.value == ""){
alert('주민번호 뒷자리를 입력해주세요.');
inputIdNum2.focus();
return false;
}
for (let i = 0; i < inputIdNum1.value.length; i++) {
arrIdNum1[i] = inputIdNum1.value.charAt(i);
} // 주민등록번호 앞자리를 inputIdNum1의 문자열 길이 만큼
for (let i = 0; i < inputIdNum2.value.length; i++) {
arrIdNum2[i] = inputIdNum2.value.charAt(i);
} // 주민등록번호 뒷자리를 inputIdNum2의 문자열 길이 만큼
let tempSum = 0;
for (let i = 0; i < inputIdNum1.value.length; i++) {
tempSum += arrIdNum1[i] * (2 + i);
} // 주민등록번호의 공식을 적용하여 앞자리를 모두 계산하여 더함
for (let i = 0; i < inputIdNum2.value.length - 1; i++) {
if (i >= 2) {
tempSum += arrIdNum2[i] * i;
} else {
tempSum += arrIdNum2[i] * (8 + i);
}
} // 주민등록번호의 공식을 적용하여 뒷자리를 모두 계산하여 더함
if ((11 - (tempSum % 11)) % 10 != arrIdNum2[6]) {
alert("올바른 주민번호가 아닙니다.");
inputIdNum1.value = "";
inputIdNum2.value = "";
inputIdNum1.focus();
return false;
} // 주민등록번호 비교
// 입력된 주민 번호로 생일 입력하기
if (arrIdNum2[0] == 1 || arrIdNum2[0] == 2) { // 2000년 이전
let y = parseInt(inputIdNum1.value.substring(0, 2)); // 2자리씩
let m = parseInt(inputIdNum1.value.substring(2, 4));
let d = parseInt(inputIdNum1.value.substring(4, 6));
inputYear.value = 1900 + y; // 년
inputMonth.value = m; // 월
inputDay.value = d; // 일
} else if (arrIdNum2[0] == 3 || arrIdNum2[0] == 4) { // 2000년 이후
let y = parseInt(inputIdNum1.value.substring(0, 2));
let m = parseInt(inputIdNum1.value.substring(2, 4));
let d = parseInt(inputIdNum1.value.substring(4, 6));
inputYear.value = 2000 + y;
inputMonth.value = m;
inputDay.value = d;
}
// 전화번호 유효성 검사
if(inputPhone.value == ""){
alert('전화번호를 입력해주세요.');
inputPhone.focus();
return false;
}else if(!regexrPhone.test(inputPhone.value)){
alert("전화번호가 올바르지 않습니다.");
inputPhone.value = "";
inputPhone.focus();
return false;
}
// 생일 (연도) 유효성 검사
if(inputYear.value == ""){
alert('주민번호를 입력하면 생일이 자동입력됩니다.');
inputIdNum1.focus();
return false;
}
// 관심분야 유효성 검사
let check = false;
for(let i = 0; i < inputCheck.length; i++){
if(inputCheck[i].checked == false ) {
// 하나도 체크되지 않으면 false 반환
check = false;
}else{
// 하나라도 체크되어있으면 true 반환 및 break;
check = true;
break;
}
}
if(check == false){
alert("관심 분야를 선택하세요.");
return false;
}
// 자기소개 유효성 검사
if(inputIntro.value == ""){
alert('자기소개를 입력해주세요.');
inputIntro.focus();
return false;
}
let emailSubject = '회원가입 신청';
let emailBody = 'contents';
window.location.href = `mailto:${inputEmail.value}?subject=${emailSubject}&body=${emailBody}`;
}
이렇게 정규표현식을 이용한 유효성 검사를 진행해보았습니다.
생각보다 api를 가져와서 document의 Element에 넣어주는 게 쉽게 안돼서 함께 공부하는 동기에게 도움을 받아 진행했습니다.
- api 주소를 올바르게 가져오는 것에 주의해야합니다.
- vs코드 내에서 Run Code로 실행시키지 않고, Go Live 라는 확장 프로그램을 이용해서 페이지를 열어야 주소값을 document로 불러오는 게 제대로 작동했습니다.
생각보다 신경써야할 것들이 많아서 유효성 검사를 할 때, 어떤 것들을 고려해야하는 지 정리해놓고 해야겠다고 느꼈습니다.
이 페이지의 이 입력칸에서는 어떤 값을 요구하는 지, 어떤 제한을 둬야하는 지 정확히 파악하고 그에 맞게 조건을 걸어야 정확한 유효성 검사가 진행될 것 이라고 생각하게되었습니다.
정규 표현식을 쓰지 않고 위와 같은 양식으로 일반 유효성 검사를 진행해봤는데, 확실히 코드가 더 길어지고 복잡했습니다.
여기까지 회원가입 양식을 가지고 정규표현식을 사용해서 유효성 검사를 진행해보았습니다.
감사합니다.
'HTML > JavaScript' 카테고리의 다른 글
[ JS / node.js ] 백준 - 1009번 분산처리 (0) | 2024.02.14 |
---|---|
[JavaScript] JS 변수 선언 var, let, const 차이점 (36) | 2023.09.21 |
[JavaScript] 정규표현식을 작성해보자(1) (48) | 2023.09.18 |
[HTML/CSS/JS] JavaScript를 작성해보자 (2) | 2023.09.15 |