제이쿼리 폼 검사 예제
폼 속성 text/radio/checkbox/이메일 검사하기
※폼 유효성 검사란...
폼 유효성 검사는 사용자가 입력한 값을 서버사이드로 넘기기 전에 유효한 값인지를 확인하는 과정입니다.
사용자가 입력한 값에 문제가 있어서 폼을 다시 작성하는 일이 발생하지 않도록 미리 방지를 하는거죠.
폼 검사를 하기위해 다양한 HTML 입력 태그를 사용할텐데요.
이번 강좌를 통해 유효성 검사는 물론 다양한 제이쿼리 선택자도 공부할 수 있습니다.
영화동호회에서 설문조사를 한다고 생각하고 폼을 만들어 볼게요~
입력항목은 다음과 같이 정의하겠습니다.
이름, 나이, 성별, 이메일주소, 좋아하는 장르, 좋아하는 극장
이름, 나이, 이메일주소 항목은 텍스트박스를 사용합니다.
성별 항목은 라디오버튼을 사용하고요.
좋아하는 장르와 극장은 체크박스를 사용해 보도록 하죠.
※폼 예제
(1)HTML 코드
<body>
<form name="megabox" id="megabox" method="post" action="megabox.html">
이 름 : <input type="text" name="user_name" id="user_name"> </br>
나 이 : <input type="text" name="user_name" id="user_age"> </br>
이메일 : <input type="text" name="user_name" id="user_email"> </br>
성 별 : 남 <input type="radio" name="gender"> 여 <input type="radio" name="gender"> </br>
좋아하는 장르 : 액션<input type="checkbox" class="inputCheck1" name="movie1">
공포<input type="checkbox" class="inputCheck1" name="movie2">
코미디<input type="checkbox" class="inputCheck1" name="movie3">
드라마<input type="checkbox" class="inputCheck1" name="movie4">
SF<input type="checkbox" class="inputCheck1" name="movie5">
멜로<input type="checkbox" class="inputCheck1" name="movie6"> </br>
좋아하는 극장 : 서울극장<input type="checkbox" class="inputCheck2" name="theater1">
CGV<input type="checkbox" class="inputCheck2" name="theater1">
롯데시네마<input type="checkbox" class="inputCheck2" name="theater1">
메가박스<input type="checkbox" class="inputCheck2" name="theater1"> </br>
<input type="button" value="등록" onclick="formCheck()">
</form>
</body>
(2)HTML 코드 설명
텍스트박스 및 라디오버튼은 특별한 부분이 없지만 체크박스에는 class 속성이 있는데요.
폼 검사를 할 때 하나 이상 체크를 했는지 검사하기 위한 속성입니다.
그리고 등록버튼을 클릭하면 formCheck() 라는 메소드를 실행합니다.
(3)SCRIPT 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function formCheck(){
//이름검사
var user_name = $("#user_name").val();
if(user_name == ""){
alert("이름을 입력하세요.");
$("#user_name").focus();
return;
}
//나이검사
var user_age = $("#user_age").val();
if(user_age == ""){
alert("나이를 입력하세요.");
$("#user_age").focus();
return;
}
//이메일검사
var inputEmail = $("#user_email");
var regEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if(inputEmail.val() == ""){
alert("이메일 주소를 입력해 주세요.");
inputEmail.focus();
return;
}
if(!regEmail.test(inputEmail.val())) {
alert('이메일 주소가 유효하지 않습니다');
inputEmail.focus();
return false;
}
//성별검사
var radioCheck = $(":radio[name='gender']:checked").val();
if(radioCheck == undefined){
alert("성별을 선택해 주세요.");
return;
}
//장르섬사
var movieFlag = false
$(".inputCheck1").each(function(){
if($(this).attr('checked') == 'checked'){
movieFlag = true;
}
});
if(movieFlag == false){
alert("좋아하는 장르를 최소 하나 선택해 주세요.");
return;
}
//극장섬사
var theaterFlag = false
$(".inputCheck2").each(function(){
if($(this).attr('checked') == 'checked'){
theaterFlag = true;
}
});
if(theaterFlag == false){
alert("좋아하는 극장을 최소 하나 선택해 주세요.");
return;
}
$("#megabox").submit();
}
</script>
(3)SCRIPT 코드 설명
텍스트박스 검사)
이름, 나이, 이메일 입력값은 텍스트박스의 아이디 선택자를 이용하여 입력 여부를 확인합니다.
$(#아이디).val() 는 아이디로 선택한 오브젝트의 value.. 즉 오브젝트의 값을 의미합니다.
$("#아이디").focus() 는 아디로 선택한 오브젝트에 커서를 이동하라는 focus 기능입니다.
이메일 검사)
그런데 이메일은 단순히 입력 여부만을 체크하는것이 아니고요.
이메일 형식에 맞는 형식인지 체크를 한번 더 합니다.
var regEmail 이라는 변수가 이메일 정규식을 정의한 변수인데요.
이메일 형식은 aaa@aaa.com 과 같은 형식입니다.
앞자리는 "숫자/영문" 이고 "@"가 반드시 들어가야 하며 뒷 자리는 "주소.주소" 형식을 규정하고 있습니다.
체크박스 검사)
그리고 장르와 극장은 클래스의 길이만큼 검사를 하는데요.
바로 each문을 사용해서 장르 체크박스와 극장 체크박스의 클래스명을 가지고 있는 모든 오브젝트의 길이만큼 검사를 합니다.
each문 사용법)
오브젝트.each(function(){
오브젝트의 길이만큼 수행할 명령
});
movieFlag 라는 변수를 false 값으로 초기화를 하고 inputCheck1라는 클래스를 가진 오브젝트 전부를 하나씩 검사합니다.
장르 같은 경우는 체크박스가 총 6개이니 6번 검사를 하겠죠.
$(this) 라는 선택자는 6개의 오브젝트 중 현재 검사를 하는 오브젝트를 의미합니다.
즉 $(this)라는 선택자는 1씩 증가하면서 다음 오브젝트, 다음 오브젝트.. 를 선택한다는 의미이죠.
if문 사용법)
if($(this).attr('checked') == 'checked'){
movieFlag = true;
}
위 코드를 설명하자면...
지금 선택한 this의 오브젝트 체크여부(checked)가 checked 라면 movieFlag의 값을 true 로 변경합니다.
즉 6개의 오브젝트 중에 하나라도 체크가 되었다면 movieFlag은 true가 되겠죠.
그리하여 다음 if 구문에서 movieFlag은 false가 아니므로 유효성 검사를 만족하는 겁니다.
폼 서브밋)
그리고 모든 검사가 끝나면 폼을 서브밋 시키는데요.
$("#아이디").submit() 는 아이디 값으로 선택한 오브젝트를 submit 하라는 의미입니다.
※폼 예제 실행결과
이름을 입력하라는 메시지가 나오고 포커스를 이동합니다.
나이를 입력하라는 메시지가 나오고 포커스를 이동합니다.
이메일 주소를 입력하라는 메시지가 나오고 포커스를 이동합니다.
이메일 주소가 유효하지 않다는 메시지가 나오고 포커스를 이동합니다.
성별을 선택하라는 메시지가 나옵니다.
좋아하는 장르를 최소 하나 선택하라는 메시지가 나옵니다.
좋아하는 극장을 최소 하나 선택하라는 메시지가 나옵니다.
모든 검사를 통과하면 form 태그에서 지정한 action 페이지.. 즉 megabox.html 페이지로 폼을 서브밋 합니다.
test.html 전체 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function formCheck(){
//이름검사
var user_name = $("#user_name").val();
if(user_name == ""){
alert("이름을 입력하세요.");
$("#user_name").focus();
return;
}
//나이검사
var user_age = $("#user_age").val();
if(user_age == ""){
alert("나이를 입력하세요.");
$("#user_age").focus();
return;
}
//이메일검사
var inputEmail = $("#user_email");
var regEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if(inputEmail.val() == ""){
alert("이메일 주소를 입력해 주세요.");
inputEmail.focus();
return;
}
if(!regEmail.test(inputEmail.val())) {
alert('이메일 주소가 유효하지 않습니다');
inputEmail.focus();
return false;
}
//성별검사
var radioCheck = $(":radio[name='gender']:checked").val();
if(radioCheck == undefined){
alert("성별을 선택해 주세요.");
return;
}
//장르섬사
var movieFlag = false
$(".inputCheck1").each(function(){
if($(this).attr('checked') == 'checked'){
movieFlag = true;
}
});
if(movieFlag == false){
alert("좋아하는 장르를 최소 하나 선택해 주세요.");
return;
}
//극장섬사
var theaterFlag = false
$(".inputCheck2").each(function(){
if($(this).attr('checked') == 'checked'){
theaterFlag = true;
}
});
if(theaterFlag == false){
alert("좋아하는 극장을 최소 하나 선택해 주세요.");
return;
}
$("#megabox").submit();
}
</script>
<body>
<form name="megabox" id="megabox" method="post" action="megabox.html">
이 름 : <input type="text" name="user_name" id="user_name"> </br>
나 이 : <input type="text" name="user_name" id="user_age"> </br>
이메일 : <input type="text" name="user_name" id="user_email"> </br>
성 별 : 남 <input type="radio" name="gender"> 여 <input type="radio" name="gender"> </br>
좋아하는 장르 : 액션<input type="checkbox" class="inputCheck1" name="movie1">
공포<input type="checkbox" class="inputCheck1" name="movie2">
코미디<input type="checkbox" class="inputCheck1" name="movie3">
드라마<input type="checkbox" class="inputCheck1" name="movie4">
SF<input type="checkbox" class="inputCheck1" name="movie5">
멜로<input type="checkbox" class="inputCheck1" name="movie6"> </br>
좋아하는 극장 : 서울극장<input type="checkbox" class="inputCheck2" name="theater1">
CGV<input type="checkbox" class="inputCheck2" name="theater1">
롯데시네마<input type="checkbox" class="inputCheck2" name="theater1">
메가박스<input type="checkbox" class="inputCheck2" name="theater1"> </br>
<input type="button" value="등록" onclick="formCheck()">
</form>
</body>
</html>
megabox.html 전체 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
수고하셨어요 :)
</body>
</html>
제이쿼리 폼 유효성/이메일 검사하기.. 이 포스트가 유익하셨다면 
부탁드려요 :)
'코딩이야기 > jQuery' 카테고리의 다른 글
| 제이쿼리 ajax 예제 (0) | 2017.01.18 |
|---|---|
| 제이쿼리 setInterval,clearInterval 예제 (0) | 2016.12.29 |
| 제이쿼리 사용법/개념/선택자 (0) | 2016.11.11 |