[JavaScript] 유효성 검사 된 회원가입 만들기 (ver.정규식, ver.비정규식)

안녕하세요 나홀로전세집입니다.

 

오늘은 자바스크립트로 정규표현식과 if문을 사용하여 유효성 검사를 추가한 회원가입을 만들어보겠습니다.

 

정규표현식은 주어진 텍스트에서 원하는 패턴을 검색하거나 해당 패턴을 다른 문자열로 대체하거나 추출하는데 사용됩니다. 

 

화면 구성은 이러합니다.

아이디, 비밀번호, 이메일, 이름, 주소, 주민등록번호, 생일, 관심분야, 자기소개를 받도록 만들었습니다.

 

화면 구성 html은 제일 아래 드리도록 하겠습니다.

 

 

회원가입을 할 때 정규표현식으로 유효성 검사 하는 방법

아이디는 4~12 글자의 영문 대소문자를 사용할 수 있게 만들었습니다. 

var idRegex = /^[a-zA-Z0-9]{4,12}$/;

비밀번호 또한 4~12 글자의 영문 대소문자를 사용할 수 있게 만들었습니다. 

var passwordRegex = /^[a-zA-Z0-9]{4,12}$/;

이메일은 이메일 앞 부분엔 영어 대소문자와 숫자, 그리고 이메일이 포함될 수 있는 특수문자가 들어갈 수 있게 만들었고, @를 꼭 포함해야된다고 만들었습니다. @ 뒤에는 도메인으로 사용할 수 있는 특수문자와 영어 대소문자, 숫자가 들어갈 수 있게 만들었고, . 뒤에는 영어만 들어갈 수 있게 만들었습니다. 또한 글자의 길이가 2보다 작을 시 회원가입이 안되게 만들었습니다.

var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

 

이름은 한글만 가능하도록 만들었습니다.

var nameRegex =  /^[가-힣]/;

 

그리고 주민등록번호가 13자리가 아닐 때도 회원가입이 안되게 해놨습니다. 또한 주민등록번호가 공식에 안맞을 경우에도 회원가입이 안되도록 만들었습니다.

 

var sum = 0;
    		var temp = 2;
    		var rrnInput = document.getElementById('my_rrn').value;

    		if (rrnInput.length !== 13) {
        		alert("주민등록번호는 13자리여야 합니다.");
        		return false;
    		}

    		for (var i = 0; i < 12; i++) {
        		if (temp == 10) {
           		temp = 2;
        		}
        		sum += parseInt(rrnInput.charAt(i), 10) * temp++;
    		}

    		var confirm = sum % 11;
    		confirm = 11 - confirm;
    		if (confirm >= 10) {
        		confirm = confirm - 10;
    		}
    		if (parseInt(rrnInput.charAt(12), 10) === confirm) {
        		var year = document.getElementById('my_year');
        		var month = document.getElementById('month');
        		var day = document.getElementById('day');
        		var tempYear = rrnInput.substring(0, 2);
			var tempMonth = rrnInput.substring(2, 4);
			var tempDay = rrnInput.substring(4, 6);
			var sevenNum = rrnInput.charAt(6);
			
        		if (sevenNum > 2) {
            			year.value = "20" + tempYear;
        		} else {
            			year.value = "19" + tempYear;
        		}
			month.value = parseInt(tempMonth);
			day.value = parseInt(tempDay);
        		confirmRrn = true;
			
			document.getElementById('my_year').readOnly = true;
			document.getElementById('month').disabled = true;
			document.getElementById('day').disabled = true;
        		return true;
    		} else {
        		alert("주민등록번호가 올바르지 않습니다.");
        		return false;
    		}

 그 외 나머지 자잘한 것들도 유효성 검사를 했습니다.

 

 

회원가입을 할 때 if문으로 유효성 검사 하는 방법

정규표현식을 사용하지 않고 유효성 검사를 하는 것은 굉장히 귀찮은 일입니다.

 

정규 표현식으로 만들었던 제한 부분을 직접 메서드로 만들었습니다.

 

아이디와 비밀번호는 4~12자로 영문 대소문자와 숫자로 만들어야합니다.

function isValidIdPassword(idPassword) {
	for (var i = 0; i < idPassword.length; i++) {
		var char = idPassword.charAt(i);
		if (!((char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z') || (char >= '0' && char <= '9'))) {
				return false;
		}
	}
	return idPassword.length >= 4 && idPassword.length <= 12;
}

 

 

이메일은 @와 . 이 꼭 포함되어야하고, 이메일 아이디와 도메인에 들어갈 수 없는 것들을 판단해서 유효성 검사를 합니다.

function isValidEmail(email) {
	var atIndex = email.indexOf("@");

	if (atIndex === -1 || atIndex === 0) {
		return false;
	}

	var username = email.substring(0, atIndex);
	var domain = email.substring(atIndex + 1);

	if (username.length === 0 || domain.length === 0) {
		return false;
	}
	var disallowedCharacters = [" ", ",", ";", ":", "<", ">", "(", ")", "[", "]", "{", "}", '"'];
	for (var i = 0; i < disallowedCharacters.length; i++) {
		if (username.includes(disallowedCharacters[i]) || domain.includes(disallowedCharacters[i])) {
			return false;
		}
	}

	if (email.split("@").length !== 2) {
		return false;
	}

	if (domain.indexOf(".") === -1) {
		   return false;
	}


	if (domain[0] === "." || domain[domain.length - 1] === ".") {
		return false;
	}

	return true;
}

 

이름이 한글로 입력이 안되어 있을 때도 판단합니다.

 

function nameIsKorean() {
	var nameInput = document.getElementById('my_name').value;
  
	for (var i = 0; i < nameInput.length; i++) { 
	  var index = nameInput.charCodeAt(i);
	  if ((index >= 44032 && index <= 55203)) {
		// 한글 유니코드 범위 (가-힣)
		continue;
	  } else {
		return false;
	  }
	}
	return true;
  }

 

주민등록번호 판별은 기존 코드와 똑같습니다.

 

 

 

전체 코드 보여드리겠습니다.

유효성 검사.HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    	<title>나홀로전세집</title>
	<script language = "javascript" src = "jsCode.js"></script>
</head>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<body>

<form>
    <table width='630' height='400' border='1' align="center">
        <tr>
            <td style="text-align:center; font-size:20" colspan='2' bgcolor='#c6e6fa'><strong>회원 기본 정보</strong></td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>아이디: </strong></td>
            <td><input type="text" id="my_id" size="16"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>비밀번호: </strong></td>
            <td> <input type="password" id="my_password" size="16"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>비밀번호 확인: </strong></td>
            <td> <input type="password" id="my_password2" size="16"></td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>메일주소: </strong></td>
            <td> <input type="text" id="my_email" size="20"> 예) id@domain.com</td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>이름: </strong></td>
            <td> <input type="text" id="my_name" size="20"> </td>
        </tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>주소:</td>
                  <td>
                    <input type="text" id="zip-code" placeholder="우편번호">
                     <input type="button" onClick="execDaumPostcode()" value="우편번호 찾기">
                     <input type="text" id="address-1" placeholder="주소" style="width: 243px">
                     <input type="text" id="address-2" placeholder="상세주소" style="width: 243px">
            </td>
         </tr>
 </td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>주민등록번호: </strong></td>
            <td> <input type="text" id="my_rrn" size="20" maxlength='13'>
		<input type="button" style="width:60px; height:25px;" value = "인증" onclick="rrnConfirm()">　예) 1234561234567</td>
	
        </tr>
<tr>
    <td style="text-align:center" width='120' bgcolor='#cccccc'><strong>생일: </strong></td>
    <td>
        <input type="text" id="my_year" size="2" maxlength='4'>년
        <select 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 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 style="text-align:center" width='120' bgcolor='#cccccc'><strong>관심분야: </strong></td>
            <td>
                <input type="checkbox" name="my_hobby" size="20">컴퓨터
                <input type="checkbox" name="my_hobby" size="20">인터넷
                <input type="checkbox" name="my_hobby" size="20">여행
                <input type="checkbox" name="my_hobby" size="20">영화감상
                <input type="checkbox" name="my_hobby" size="20">음악감상
            </td>
        </tr>
        <tr>
            <td style="text-align:center" width='120' height='130' bgcolor='#cccccc'><strong>자기소개: </strong></td>
            <td><textarea id="my_info" rows="11" cols="69"></textarea></td>
        </tr>
    </table>

    <br>
    <p align="center">
	<input type="submit" value="회원가입" onclick="return validate();">
        <input type="reset" value="다시입력">
    </p>
</form>
</body>
</html>

 

 

jsCode.js (if문으로 유효성)

var confirmRrn = false;

function validate() {

		var idInput = document.getElementById('my_id');
		var passwordInput = document.getElementById('my_password');
		var password2Input = document.getElementById('my_password2');
		var emailInput = document.getElementById('my_email');
		var rrnInput = document.getElementById('my_rrn');
		var nameInput = document.getElementById('my_name');
		var hobbyInputs = document.getElementsByName('my_hobby');
		var infoInput = document.getElementById('my_info');

		if (idInput.value == "") {
			alert('아이디를 입력해주세요.');
			return false;
		}
		if (!isValidIdPassword(idInput.value)) {
			alert('아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.');
			idInput.value = "";
			return false;
		}
		if (passwordInput.value == "") {
			   alert('비밀번호를 입력해주세요.');
			return false;
		}
		if (!isValidIdPassword(passwordInput.value)) {
			alert('비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.');
			passwordInput.value = "";
			return false;
		}
		if(idInput.value == passwordInput.value){
			alert('아이디와 비밀번호는 같을 수 없습니다.');
			passwordInput.value = "";
			password2Input.value = "";
			return false;
		}
		if (passwordInput.value !== password2Input.value) {
			alert('비밀번호가 일치하지 않습니다.');
			passwordInput.value = "";
			password2Input.value = "";
			return false;
		}
		if (!isValidEmail(emailInput.value)) {
			alert('올바른 이메일 주소를 입력해야 합니다.');
			emailInput.value = "";
			return false;
		}
		if(nameInput.value == ""){
			alert('이름을 입력해주세요.');
			return false;
		}
		if(!nameIsKorean()){
			alert("이름은 한글로 입력해야합니다.");
			document.getElementById('my_name').value = "";
			return false;
		}
		if(document.getElementById('zip-code').value == "" && document.getElementById('address-1').value == "" &&  document.getElementById('address-2').value == ""){
			alert('주소를 입력해주세요.');
			return false;
		}
		if(document.getElementById('address-2').value == ""){
			alert('상세 주소를 입력해주세요.');
			return false;
		}
		if(rrnInput.length != 13){
			alert('주민등록번호는 13자리입니다.');
			return false;
		}
		if(!confirmRrn){
			alert('주민등록번호 인증을 해주세요.');
			return false;
		}

		var isHobbySelected = false;
		for (var i = 0; i < hobbyInputs.length; i++) {
			if (hobbyInputs[i].checked) {
				isHobbySelected = true;
				break;
			}
		}
		if (!isHobbySelected) {
			alert('관심분야는 최소 1개 이상 선택해주세요.');
			return false;
		}
		if(infoInput.value.length < parseInt(10)){
			alert('자기소개는 10자 이상 작성해주세요');
			return false;
		}
		if(infoInput.value.length > parseInt(500)){
			alert('자기소개는 500자 이하로 작성해주세요');
			return false;
		}
		alert("회원가입이 완료되었습니다!");
		window.location.href = `mailto:${emailInput}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
		return true;
	}


function isValidIdPassword(idPassword) {
	for (var i = 0; i < idPassword.length; i++) {
		var char = idPassword.charAt(i);
		if (!((char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z') || (char >= '0' && char <= '9'))) {
				return false;
		}
	}
	return idPassword.length >= 4 && idPassword.length <= 12;
}

function isValidEmail(email) {
	var atIndex = email.indexOf("@");

	if (atIndex === -1 || atIndex === 0) {
		return false;
	}

	var username = email.substring(0, atIndex);
	var domain = email.substring(atIndex + 1);

	if (username.length === 0 || domain.length === 0) {
		return false;
	}
	var disallowedCharacters = [" ", ",", ";", ":", "<", ">", "(", ")", "[", "]", "{", "}", '"'];
	for (var i = 0; i < disallowedCharacters.length; i++) {
		if (username.includes(disallowedCharacters[i]) || domain.includes(disallowedCharacters[i])) {
			return false;
		}
	}

	if (email.split("@").length !== 2) {
		return false;
	}

	if (domain.indexOf(".") === -1) {
		   return false;
	}


	if (domain[0] === "." || domain[domain.length - 1] === ".") {
		return false;
	}

	return true;
}

function nameIsKorean() {
	var nameInput = document.getElementById('my_name').value;
  
	for (var i = 0; i < nameInput.length; i++) { 
	  var index = nameInput.charCodeAt(i);
	  if ((index >= 44032 && index <= 55203)) {
		// 한글 유니코드 범위 (가-힣)
		continue;
	  } else {
		return false;
	  }
	}
	return true;
  }
  

function rrnConfirm() {
	var sum = 0;
	var temp = 2;
	var rrnInput = document.getElementById('my_rrn').value;

	if (rrnInput.length !== 13) {
		alert("주민등록번호는 13자리여야 합니다.");
		return false;
	}

	for (var i = 0; i < 12; i++) {
		if (temp == 10) {
		   temp = 2;
		}
		sum += parseInt(rrnInput.charAt(i), 10) * temp++;
	}

	var confirm = sum % 11;
	confirm = 11 - confirm;
	if (confirm >= 10) {
		confirm = confirm - 10;
	}


	if (parseInt(rrnInput.charAt(12), 10) === confirm) {
		var year = document.getElementById('my_year');
		var month = document.getElementById('month');
		var day = document.getElementById('day');
		var tempYear = rrnInput.substring(0, 2);
	var tempMonth = rrnInput.substring(2, 4);
	var tempDay = rrnInput.substring(4, 6);
	var sevenNum = rrnInput.charAt(6);
	
		if (sevenNum > 2) {
				year.value = "20" + tempYear;
		} else {
				year.value = "19" + tempYear;
		}
	month.value = parseInt(tempMonth);
	day.value = parseInt(tempDay);
		confirmRrn = true;
	
	document.getElementById('my_year').readOnly = true;
	document.getElementById('month').disabled = true;
	document.getElementById('day').disabled = true;
		return true;
	} else {
		alert("주민등록번호가 올바르지 않습니다.");
		return false;
	}
}

function execDaumPostcode() {
		new daum.Postcode({
			oncomplete: function(data) {
				var addr = '';
				
				if (data.userSelectedType === 'R') {
					addr = data.roadAddress;
				} else if (data.userSelectedType === 'J') {
					addr = data.jibunAddress;
				}
				
				document.getElementById('zip-code').value = data.zonecode;
				document.getElementById("address-1").value = addr;
				document.getElementById("address-2").focus();
			}
		}).open();
	}

 

 

jsCode2.js (정규표현식으로 유효성)

	var confirmRrn = false;

        function validate() {
				var idRegex = /^[a-zA-Z0-9]{4,12}$/;
            	var passwordRegex = /^[a-zA-Z0-9]{4,12}$/;
            	var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				var nameRegex =  /^[가-힣]/;

            	var idInput = document.getElementById('my_id');
            	var passwordInput = document.getElementById('my_password');
            	var password2Input = document.getElementById('my_password2');
            	var emailInput = document.getElementById('my_email');
				var nameInput = document.getElementById('my_name');

				var hobbyInputs = document.getElementsByName('my_hobby');
				var infoInput = document.getElementById('my_info');

            	if (idInput.value == "") {
                	alert('아이디를 입력해주세요.');
                	return false;
            	}
            	if (!idRegex.test(idInput.value)) {
                	alert('아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.');
					idInput.value = "";
                	return false;
            	}
            	if (passwordInput.value == "") {
               		alert('비밀번호를 입력해주세요.');
                	return false;
            	}
            	if (!passwordRegex.test(passwordInput.value)) {
                	alert('비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.');
					passwordInput.value = "";
                	return false;
            	}
		if(idInpu.value == passwordInput.value){
			alert('아이디와 비밀번호는 같을 수 없습니다.');
			passwordInput.value = "";
			password2Input.value = "";
			return false;
		}
            	if (passwordInput.value !== password2Input.value) {
                	alert('비밀번호가 일치하지 않습니다.');
					passwordInput.value = "";
					password2Input.value = "";
                	return false;
            	}
            	if (!emailRegex.test(emailInput.value)) {
                	alert('올바른 이메일 주소를 입력해야 합니다.');
					emailInput.value = "";
                	return false;
            	}
		if(nameInput.value == ""){
			alert('이름을 입력해주세요.');
                	return false;
		}
		if (!nameRegex.test(nameInput.value)) {
			alert('이름은 한글로 작성해야합니다..');
			nameInput.value = "";
			return false;
		}
		if(document.getElementById('zip-code').value == "" && document.getElementById('address-1').value == ""  && document.getElementById('address-2').value == ""){
			alert('주소를 입력해주세요.');
                	return false;
		}
		if(!confirmRrn){
			alert('주민등록번호 인증을 해주세요.');
			return false;
		}
		var isHobbySelected = false;
    		for (var i = 0; i < hobbyInputs.length; i++) {
        		if (hobbyInputs[i].checked) {
            		isHobbySelected = true;
            		break;
        		}
    		}
    		if (!isHobbySelected) {
        		alert('관심분야는 최소 1개 이상 선택해주세요.');
        		return false;
    		}
		if(infoInput.value.length < parseInt(10)){
			alert('자기소개는 10자 이상 작성해주세요');
        		return false;
		}
		if(infoInput.value.length > parseInt(500)){
			alert('자기소개는 500자 이하로 작성해주세요');
			return false;
		}
		alert("회원가입이 완료되었습니다!");
		window.location.href = `mailto:${emailInput}?subject=회원가입 완료&body=회원가입을 환영합니다.`;
		return true;
    }

	function rrnConfirm() {
    		var sum = 0;
    		var temp = 2;
    		var rrnInput = document.getElementById('my_rrn').value;

    		if (rrnInput.length !== 13) {
        		alert("주민등록번호는 13자리여야 합니다.");
        		return false;
    		}

    		for (var i = 0; i < 12; i++) {
        		if (temp == 10) {
           		temp = 2;
        		}
        		sum += parseInt(rrnInput.charAt(i), 10) * temp++;
    		}

    		var confirm = sum % 11;
    		confirm = 11 - confirm;
    		if (confirm >= 10) {
        		confirm = confirm - 10;
    		}
    		if (parseInt(rrnInput.charAt(12), 10) === confirm) {
        		var year = document.getElementById('my_year');
        		var month = document.getElementById('month');
        		var day = document.getElementById('day');
        		var tempYear = rrnInput.substring(0, 2);
			var tempMonth = rrnInput.substring(2, 4);
			var tempDay = rrnInput.substring(4, 6);
			var sevenNum = rrnInput.charAt(6);
			
        		if (sevenNum > 2) {
            			year.value = "20" + tempYear;
        		} else {
            			year.value = "19" + tempYear;
        		}
			month.value = parseInt(tempMonth);
			day.value = parseInt(tempDay);
        		confirmRrn = true;
			
			document.getElementById('my_year').readOnly = true;
			document.getElementById('month').disabled = true;
			document.getElementById('day').disabled = true;
        		return true;
    		} else {
        		alert("주민등록번호가 올바르지 않습니다.");
        		return false;
    		}
	}

	function execDaumPostcode() {
		new daum.Postcode({
			oncomplete: function(data) {
				var addr = '';
				
				if (data.userSelectedType === 'R') {
					addr = data.roadAddress;
				} else if (data.userSelectedType === 'J') {
					addr = data.jibunAddress;
				}
				
				document.getElementById('zip-code').value = data.zonecode;
				document.getElementById("address-1").value = addr;
				document.getElementById("address-2").focus();
			}
		}).open();
	}

 

 

오늘도 즐코딩 하시고 좋은 하루 되세요~