12.12.(월) Spring Framework(11): 회원관리 기능(5)

유효성 검사

유효성 검사란 회원가입 Form에 필요한 정보들이 제대로 들어갔는지 확인하는 과정이다.

쉽게 말해서 비밀번호에 영어 대문자가 들어갔는지, 특수문자가 포함이 되었는지, 확인할 수 있다.

아이디가 조건에 맞게 들어갔는지부터 확인하자. jQuery에서 정규표현식을 이용해서 구현하자.

<script>
	$(function(){
		
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
		});
	});
<script>

 

정규표현식의 조건은 다음과 같다.

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_)
\W	/w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

비밀번호와 비밀번호 확인이 일치하는지 검사해보자.

<script>
	$(function(){
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
			
			// 비밀번호 확인
			if($("#password").val() != $("#v-password").val()){
				alert("비밀번호를 확인하세요.");
				return false;
			}
		});
	});
</script>

대한민국의 법정이름은 2~7글자 사이이므로, 이름 조건을 확인하자.

<script>
	$(function(){
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
			
			// 비밀번호 확인
			if($("#password").val() != $("#v-password").val()){
				alert("비밀번호를 확인하세요.");
				return false;
			}
			
			// 이름 조건 : 한글로 2~7글자까지 허용
			reg = /^[가-힣]{2,7}$/
			if(!reg.test($("#name").val())){
				alert("이름은 한글 2~7자까지 허용합니다.");
				return false;
			}
		});
	});
</script>

연락처를 검사해보자.

전화번호를 3개의 박스로 나눴기 때문에 이것을 합쳐서 하나의 값으로 만들 것이다.

<script>
	$(function(){
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
			
			// 비밀번호 확인
			if($("#password").val() != $("#v-password").val()){
				alert("비밀번호를 확인하세요.");
				return false;
			}
			
			// 이름 조건 : 한글로 2~7글자까지 허용
			reg = /^[가-힣]{2,7}$/
			if(!reg.test($("#name").val())){
				alert("이름은 한글 2~7자까지 허용합니다.");
				return false;
			}
			
			// 연락처 검사
			var tel = $("#tel1").val()+"-"+$("#tel2").val()+"-"+$("#tel3").val();
			console.log("tel -> ", tel);	// 브라우저 콘솔에 전화번호 표시
			// 지역번호 : 010, 02, 031, 032, 041, 042
			reg = /^(010|02|031|032|041|042)-[0-9]{3,4}-[0-9]{4}$/
			if(!reg.test(tel)){
				alert("전화번호를 확인하세요.");
				return false;
			}
		});
	});
</script>

이메일도 조건에 맞게 작성되었나 확인해보자.

이메일은 필수 입력 항목이 아니기 때문에, 무언가가 입력되었을때만 검사를 실행하도록 한다.

<script>
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
			
			// 비밀번호 확인
			if($("#password").val() != $("#v-password").val()){
				alert("비밀번호를 확인하세요.");
				return false;
			}
			
			// 이름 조건 : 한글로 2~7글자까지 허용
			reg = /^[가-힣]{2,7}$/
			if(!reg.test($("#name").val())){
				alert("이름은 한글 2~7자까지 허용합니다.");
				return false;
			}
			
			// 연락처 검사
			var tel = $("#tel1").val()+"-"+$("#tel2").val()+"-"+$("#tel3").val();
			console.log("tel -> ", tel);	// 브라우저 콘솔에 전화번호 표시
			// 지역번호 : 010, 02, 031, 032, 041, 042
			reg = /^(010|02|031|032|041|042)-[0-9]{3,4}-[0-9]{4}$/
			if(!reg.test(tel)){
				alert("전화번호를 확인하세요.");
				return false;
			}
			
			// 이메일 검사
			// smg1024@naver.com	smg1024@cau.ac.kr
			if($("#email").val()!=""){	// 이메일은 필수 입력 항목이 아님
				// 이메일은 다른 사이트의 이메일을 가져오는 것이기 때문에 최대한 널널한 조건으로 설정
				// ? : 있거나 없거나
				reg = /^\w{6,15}[@][a-z0-9]{2,8}[.][a-z]{1,3}([.][a-z]{1,3})?$/
				if(!reg.test($("#email").val())){
					alert("잘못된 이메일 주소입니다.");
					return false;
				}
			}
		});
	});
</script>

기호	의미
?	최대 한번(없음
*	없거나 있거나 (없음
+	최소 한개(한개
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

아이디 중복확인이 제대로 되었는지 확인해주자.

<script>
	$(function(){
		// 회원가입 유효성 검사
		$("#signupForm").submit(function(){
			// 아이디 조건
			// 영어, 숫자, '_'로 이루어진 길이 6~15자리
			
			// 정규표현식
			// ^ : 처음부터 문자를 검색,	$ : 끝까지 검색
			var reg = /^[A-Za-z]{1}\w{5,14}$/	// \w : 영대소문자,숫자,_	
			if(!reg.test($("#username").val())){	// 맞으면 true, 틀리면 false
				alert("아이디를 잘못 입력하였습니다.\n아이디는 6~15자리의 영문자, 숫자, _만 사용할 수 있습니다.");
				return false;
			}
			
			// 비밀번호 확인
			if($("#password").val() != $("#v-password").val()){
				alert("비밀번호를 확인하세요.");
				return false;
			}
			
			// 이름 조건 : 한글로 2~7글자까지 허용
			reg = /^[가-힣]{2,7}$/
			if(!reg.test($("#name").val())){
				alert("이름은 한글 2~7자까지 허용합니다.");
				return false;
			}
			
			// 연락처 검사
			var tel = $("#tel1").val()+"-"+$("#tel2").val()+"-"+$("#tel3").val();
			console.log("tel -> ", tel);	// 브라우저 콘솔에 전화번호 표시
			// 지역번호 : 010, 02, 031, 032, 041, 042
			reg = /^(010|02|031|032|041|042)-[0-9]{3,4}-[0-9]{4}$/
			if(!reg.test(tel)){
				alert("전화번호를 확인하세요.");
				return false;
			}
			
			// 이메일 검사
			// smg1024@naver.com	smg1024@cau.ac.kr
			if($("#email").val()!=""){	// 이메일은 필수 입력 항목이 아님
				// 이메일은 다른 사이트의 이메일을 가져오는 것이기 때문에 최대한 널널한 조건으로 설정
				// ? : 있거나 없거나
				reg = /^\w{6,15}[@][a-z0-9]{2,8}[.][a-z]{1,3}([.][a-z]{1,3})?$/
				if(!reg.test($("#email").val())){
					alert("잘못된 이메일 주소입니다.");
					return false;
				}
			}
			
			// 아이디 중복확인 검사
			if($("#idCheckStatus").val()=="N"){
				alert("아이디 중복 확인하세요.");
				return false;
			}
		});
	});
</script>

이렇게 유효성 검사를 실행해서 DB에 잘못된 정보가 등록되는 것을 방지할 수 있다.