데이터 유효성 검사

jQuery form 데이터 유효성 검사

 

사용자가 form 안에서 올바른 값을 입력했는지 여부(데이터 유효성)는 기본적으로 서버측 스크립트로 확인해야 합니다. 사용자가 입력한 form을 서버로 전송하면 서버측 스크립트는 사용자 값을 받아서 맞는지 틀린지 확인하고 틀린 경우 다시 입력 페이지를 내놓습니다. 이 과정의 문제는 서버측 스크립트로부터 데이터 유효성 검사를 받으려면 네트웍 환경이 좋지 못한 환경에서 너무 오랜 시간을 기다려야한다는 점입니다. 사실 네트웍 환경이 좋아도 같은 페이지를 자꾸 갱신하는 것은 짜증스러운 일이죠. form이 포함된 페이지를 아무런 실수 없이 한번에 유효하게 작성해서 전송 OK! 하는 사람들이 얼마나 많을까요?

그래서 웹 개발자는 언제부터인가 이런 불편을 개선할 목적으로 데이터 유효성 확인과 같은 핵심 기능을 자바스크립트에 의존하기 시작했습니다. 데이터 유효성 검사를 자바스크립트로 처리하면 서버에 한번 다녀오지 않아도 데이터 유효성 확인이 가능하기 때문에 잘못된 데이터를 페이지 갱신 없이 즉석에서 정정할 수 있습니다. 자바스크립트에 의존한 것은 창의적으로 UX를 개선한 일로써 전혀 문제가 되지 않는데요. 문제는 자바스크립트에만 의존하는 것입니다. 개발자가 작성한 자바스크립트 가운데 전부 또는 일부를 해석하지 못하는 브라우저는 현재도 존재하고 앞으로도 존재할지 모릅니다. 대중적인 브라우저만 지원하면 그만이라는 생각은 학생증이 있는 청소년에게만 책을 빌려주는 도서관 운영 방침과 같은 겁니다.

자바스크립트를 지원하는 환경에서는 자바스크립트에 의존하여 사용성(만족, 효율)을 높이고, 자바스크립트를 지원하지 않는 환경에서는 HTML, CSS, 서버측 스크립트에 의존하도록 양쪽 방향을 모두 고려하여 설계함으로써 상호 운용성(JS 지원 여무에 무관한 운용성)을 확보할 수 있습니다. 이런 설계 기법을 겸손한 자바스크립트(Unobtrusive Javasript)라고 합니다. 겸손한 자바스크립트 관련글 하나, 겸손한 자바스크립트 관련글 둘. 이런 개념을 탑재하고 나서 자바스크립트 실력을 향상시켜도 늦지 않습니다.

오늘의 주제는 jQuery를 이용한 데이터 유효성 검사 입니다. 서버측 유효성 검사 방법은 다루지 않겠지만 서버측 스크립트에 의한 데이터 유효성 검사 또한 진행할 것이라는 전제 아래 자바스크립트로 데이터 유효성 검사 기능을 구현해 봤습니다.

 

데이터 유효성 검사 예제 코드

 

<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 동작을 취소함으로써 하이픈(-) 입력을 제한한다.