Spring
12.12.(월) Spring Framework(11): 회원관리 기능(5)
콜라든포비
2022. 12. 14. 21:39
유효성 검사
유효성 검사란 회원가입 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에 잘못된 정보가 등록되는 것을 방지할 수 있다.