메뉴 건너뛰기

조회 수 11799 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<form action="" class="form">
	<p>(*) 항목은 반드시 입력해 주세요.</p>
	<ul>
		<li>
			<label for="uid">ID(*):</label>
			<input id="uid" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 3~16 문자.
		</li>
		<li>
			<label for="upw">PW(*):</label>
			<input id="upw" type="password" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 6~18 문자.
		</li>
		<li>
			<label for="mail">Email(*):</label>
			<input id="mail" value="@" />
		</li>
		<li>
			<label for="url">Web(*):</label>
			<input id="url" value="http://" />
		</li>
		<li>
			<label for="tel">Tel(*):</label>
			<input id="tel" />
			하이픈(-)은 입력하지 마세요.
		</li>
	</ul>
	<input type="submit" value="전송" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery( function($) { // HTML 문서를 모두 읽으면 포함한 코드를 실행

	// 정규식을 변수에 할당
	// 정규식을 직접 작성할 줄 알면 참 좋겠지만
	// 변수 우측에 할당된 정규식은 검색하면 쉽게 찾을 수 있다 
	// 이 변수들의 활약상을 기대한다
	// 변수 이름을 're_'로 정한것은 'Reguar Expression'의 머릿글자
	var re_id = /^[a-z0-9_-]{3,16}$/; // 아이디 검사식
	var re_pw = /^[a-z0-9_-]{6,18}$/; // 비밀번호 검사식
	var re_mail = /^([\w\.-]+)@([a-z\d\.-]+)\.([a-z\.]{2,6})$/; // 이메일 검사식
	var re_url = /^(https?:\/\/)?([a-z\d\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/; // URL 검사식
	var re_tel = /^[0-9]{8,11}$/; // 전화번호 검사식
	
	// 선택할 요소를 변수에 할당
	// 변수에 할당하지 않으면 매번 HTML 요소를 선택해야 하기 때문에 귀찮고 성능에도 좋지 않다
	// 쉼표를 이용해서 여러 변수를 한 번에 선언할 수 있다
	// 보기 좋으라고 쉼표 단위로 줄을 바꿨다 
	var 
		form = $('.form'), 
		uid = $('#uid'), 
		upw = $('#upw'), 
		mail = $('#mail'), 
		url = $('#url'), 
		tel = $('#tel');
		
	// 선택한 form에 서밋 이벤트가 발생하면 실행한다
	// if (사용자 입력 값이 정규식 검사에 의해 참이 아니면) {포함한 코드를 실행}
	// if 조건절 안의 '정규식.test(검사할값)' 형식은 true 또는 false를 반환한다
	// if 조건절 안의 검사 결과가 '!= true' 참이 아니면 {...} 실행
	// 사용자 입력 값이 참이 아니면 alert을 띄운다
	// 사용자 입력 값이 참이 아니면 오류가 발생한 input으로 포커스를 보낸다
	// 사용자 입력 값이 참이 아니면 form 서밋을 중단한다
	form.submit( function() {
		if (re_id.test(uid.val()) != true) { // 아이디 검사
			alert('[ID 입력 오류] 유효한 ID를 입력해 주세요.');
			uid.focus();
			return false;
		} else if(re_pw.test(upw.val()) != true) { // 비밀번호 검사
			alert('[PW 입력 오류] 유효한 PW를 입력해 주세요.');
			upw.focus();
			return false;
		} else if(re_mail.test(mail.val()) != true) { // 이메일 검사
			alert('[Email 입력 오류] 유효한 이메일 주소를 입력해 주세요.');
			mail.focus();
			return false;
		} else if(re_url.test(url.val()) != true) { // URL 검사
			alert('[Web 입력 오류] 유효한 웹 사이트 주소를 입력해 주세요.');
			url.focus();
			return false;
		} else if(re_tel.test(tel.val()) != true) { // 전화번호 검사
			alert('[Tel 입력 오류] 유효한 전화번호를 입력해 주세요.');
			tel.focus();
			return false;
		}
	});
	
	// #uid, #upw 인풋에 입력된 값의 길이가 적당한지 알려주려고 한다
	// #uid, #upw 다음 순서에 경고 텍스트 출력을 위한 빈 strong 요소를 추가한다
	// 무턱대고 자바스크립트를 이용해서 HTML 삽입하는 것은 좋지 않은 버릇
	// 그러나 이 경우는 strong 요소가 없어도 누구나 form 핵심 기능을 이용할 수 있으니까 문제 없다
	$('#uid, #upw').after('<strong></strong>');
	
	// #uid 인풋에서 onkeyup 이벤트가 발생하면
	uid.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (uid.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (uid.val().length < 3) { // 입력 값이 3보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (uid.val().length > 16) { // 입력 값이 16보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 3 이상 16 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});
	
	// #upw 인풋에서 onkeyup 이벤트가 발생하면
	upw.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (upw.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (upw.val().length < 6) { // 입력 값이 6보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (upw.val().length > 18) { // 입력 값이 18보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 6 이상 18 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});
	
	// #tel 인풋에 onkeydown 이벤트가 발생하면
	// 하이픈(-) 키가 눌렸는지 확인
	// 하이픈(-) 키가 눌렸다면 입력 중단
	tel.keydown( function() {
		if(event.keyCode==109 || event.keyCode==189) {
			return false;
		}
	});
});
// ]]>
</script>


jQuery 코드 해설

  • 변수 할당은 'var 변수이름 = 할당 값'  형식으로 작성한다. re_* 라는 변수에 다양한 정규식을 할당했다. 정규식 표현은 사용자 입력 값이 유효한지 검사해 줄 것이다.
  • 정규 표현식을 어떤 값과 비교하면 true 또는 false 값을 얻을 수 있다. true라면 form을 서밋하고 false라면 form 서밋을 중단한다. 정규 표현식으로 데이터 유효성을 확인하려면 '정규식.test(어떤값)' 형식으로 작성한다. 
  • .val() 메소드는 선택한 input 또는 select 요소의 value 값을 구한다. uid.val()은 $('#uid').val()과 같다. 이렇게 val() 괄호 안쪽이 비어있으면 값을 구해온다. 만약 val() 괄호 안쪽에 명시적으로 어떤 값이 있으면 값을 구해오는 것이 아니라 값을 넣는다. 여기서 val() 값은 사용자가 #uid 인풋에 입력한 값이다.
  • if(좌변의 정규식과 != 우변의 사용자 입력 값이 같지 않으면) 사용자가 입력한 값은 오류이다. 이 조건문은 사용자 입력 값이 올바르지 않은 경우 {실행문}을 실행한다. 조건문 안에서는 ==(같음), !=(같지않음), !(아님), >(보다큰), <(보다작은), >=(같거나 큰), <=(같거나 작은) 이런 등호가 자주 쓰인다. 등호는 어떤 값을 true, false와 같은 참 거짓 또는 숫자와 자주 비교한다. 
  • .after() 메소드는 선택한 요소의 다음(형제 노드) 순서에 문자열이나 HTML 요소를 넣는다. 이 예제는 $('#uid, #upw').after('<strong></strong>') 두 요소를 선택하고 두 요소의 다음에 strong 요소를 넣었다. 반대 개념의 메소드 .before()는 선택한 요소의 이전 형제노드에 문자열을 넣는다. 
  • .length 메소드는 선택한 HTML 요소의 개수 또는 val() 값의 문자 개수를 구해온다. 이 경우는 선택한 HTML 요소의 개수를 구한 것이 아니라 val() 값의 문자 개수를 구했다.
  • .next() 메소드는 선택한 요소의 바로 다음에 등장하는 형제를 선택한다. $(this).next('strong') 예제는 선택된 본인의 다음에 등장하는 strong 요소를 선택한다. 반대 개념의 메소드 .prev()는 이전 형제 요소를 선택한다. 
  • .text() 메소드는 .val() 메소드와 사용법이 유사하다. HTML 요소 내부에 포함된 문자열을 구하거나 셋팅한다. 값이 비어있으면 값을 구해오지만 값이 설정되어 있으면 값을 셋팅한다. 이 코드는 값을 셋팅하는 예제만 포함하고 있다.
  • event.keyCode는 사용자가 누른 키의 값을 구한다. 키 값은 숫자를 반환하는데. 109, 189는 하이픈(-)의 키 값이다. 즉 하이픈(-) 키가 눌리면 keydown 동작을 취소함으로써 하이픈(-) 입력을 제한한다.

List of Articles
번호 제목 날짜 조회 수
119 검토하기: jQuery를 이용하여 form 처리하기 2017.03.02 7511
118 jquery 이용한 필수입력체크(input form) 2017.03.02 10557
117 jQuery 실행패턴 2017.03.02 6681
» jQuery 입문: form 데이터 유효성 검사 2017.03.02 11799
115 예제로 만나보는 제이쿼리 - 비동기 파일업로드 file 2017.03.06 7343
114 파일 업로드 방법, 이미지 파일 업로드 예제 소스 2017.03.06 9028
113 Ajax 파일 업로드 샘플 코드 2017.03.11 7791
112 jquery를 활용한 입력폼 초기화하기 2017.03.27 8702
111 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.05 5794
110 jquery 체크박스 배열 처리. 변수 하나에 담기. 2018.07.04 4657
109 jQuery 유효성 검사 2018.07.04 3362
108 jQuery selectBox 컨트롤. 2018.07.25 2558
107 jquery - select option 선택값 가져오기 2018.09.06 5330
106 jQuery 폼 입력값 체크 예제 2018.09.06 2092
105 입력폼에 입력되는 값의 유효성 체크하기 두번째 file 2018.09.06 1835
104 페이지 이동 제어 - href, replace, pushState() 2018.09.06 2620
103 외부 파일 드래그 드롭 구현 file 2018.09.06 1678
102 드래그 & 드랍 구현 - on()[이벤트리스너] file 2018.09.06 2888
101 [jQuery] 확인 창(confirm), 페이지 이동(location.replace) 2018.09.06 2647
100 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 1813
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved