후원회원 가입 신청을 위해 주민등록번호 앞의 6자리를 입력 받으려 하는데요.

 

write_form.html에서 코드는 다음과 같이 했습니다.

유효성 검사를 위한 스크립트 함수는 checkSNumber()이구요.

 

<!--@if($val->eid=='s_number')-->
<input name="extra_vars{$val->idx}" class="itx" type="number" maxlength="6" onsubmit="checkSNumber(this)">
<p>{$val->desc}</p>
<script>
function checkSNumber(obj) {
    var val = obj.value;
    var yy = val.substr(0,2),
        mm = val.substr(2,2),
        dd = val.substr(4,2),
        msg = '\n주민등록번호를 다시 입력해주세요.';
    if(val.length!=0) { // 글자가 입력되지 않으면 해당 사용자 정의가 필수항목이므로 등록이 안 됨
        if(val.length!=6) {
            alert('6자리를 모두 입력하셔야 합니다.' + msg);
            check2Error(obj);
        } else {
            if(mm<01||mm>12) {
                alert('12월을 넘는 숫자를 입력하셨습니다.' + msg);
                check2Error(obj);
            }
            if(dd<01||dd>31) {
                alert('31일을 넘는 숫자를 입력하셨습니다.' + msg);
                check2Error(obj);
            }
            if((mm==04||mm==06||mm==09||mm==11)&&dd==31) {
                if(mm!=11) mm = mm.slice(1);
                alert(mm+'월에는 31일이 없습니다.' + msg);
                check2Error(obj);
            }
            if(mm==02) {
                var isLeap = (yy%4==0&&(yy%100!=0||yy%400==0));
                if(dd==30||dd==31) {
                    alert('2월에는 ' + dd + '일이 없습니다.' + msg);
                    check2Error(obj);
                }
                if(dd==29&&!isLeap) {
                    alert(yy+'년 2월에는 29일이 없습니다.' + msg);
                    check2Error(obj);
                }
            }
        }
    }
}
function check2Error(o) {
    o.focus();
    return false;
}
</script>
<!--@end-->

 

여기서 input 태그에 checkSNumber(this)함수를 onsubmit 속성으로 삽입을 해보기도 했는데요.

게시판 모듈이어서 그런지 form 태그에 onsubmit으로 걸려 있는 proFilter함수 외에는 등록 시에 유효성 검사가 되지 않더라구요.

 

글 등록할 때 checkSNumber 함수로 해당 확장변수 입력값의 유효성도 동시에 검토하고 싶은데요, 다른 방법이 있을지 궁금합니다.

  • profile

    혼자 파보다가 꼼수로 대강 돌려 막았습니다;;;

     

    히든 인풋을 만들고, 비저블 인풋에 키업이 되면 히든 인풋으로 밸류가 복사됩니다.

    이때 키업 이벤트에서 월일별 허용범위를 넘는 값이 전달되면 히든 인풋의 밸류는 비워집니다.

    유효하지 않은 번호를 입력하게 되면 글 등록시에 '주민등록번호 값은 필수 입니다.' 같은 얼러트가 뜨면서 등록이 중지되죠.

     

    그리고 이용자의 입력값이 어떤 점에서 잘못됐는지를 알려주기 위해, p태그의 텍스트 값을 활용합니다.

    조건에 따라서 유효성 검사 결과를 띄웁니다.

     

    <!--@if($val->eid=='s_number')-->
        <style>
            #s_number_hidden{width:0; height:0; border:0; overflow:hidden; padding:0; float:right;}
        </style>
        <input class="itx" id="{$val->eid}" type="number" value="{$oDocument->getExtraEidValue($val->eid)}" maxlength="6">
        <p>{$val->desc}</p>
        <input name="extra_vars{$val->idx}" class="itx" id="{$val->eid}_hidden" type="number" value="" maxlength="6">
        <script>
        jQuery(document).ready(function(){
            var sNumber = jQuery('#s_number'),
                len = sNumber.attr('maxlength');
                hidden = jQuery('#s_number_hidden'),
                para = sNumber.next('p'),
                pText = para.text();
            hidden.val(sNumber.val());
            checkSNumber(sNumber,para,pText,hidden);
            sNumber.on('input blur focus',function(){
                if(sNumber.val().length>len) sNumber.val(sNumber.val().substring(0,len-1));
                sNumber.val(sNumber.val().replace(/[^0-9]/g,''));
                checkSNumber(jQuery(this),para,pText,hidden);
            });
            function checkSNumber(obj,p,pt,h){
                var val = obj.val();
                var yy = val.substr(0,2),
                    mm = val.substr(2,2),
                    dd = val.substr(4,2),
                    msg = ' 다시 입력해주세요.',
                    scs = '주민등록번호가 바르게 입력되었습니다.';
                h.val(obj.val());
                if(val.length!=0) {
                    if(val.length!=6) {
                        p.text('6자리를 모두 입력하셔야 합니다. 마저 입력해주세요.');
                        h.val('');
                    } else {
                        if(mm<01||mm>12) {
                            p.text('1월~12월이 아닌 숫자를 입력하셨습니다.' + msg);
                            h.val('');
                        } else if(dd<01||dd>31) {
                            p.text('1일~31일이 아닌 숫자를 입력하셨습니다.' + msg);
                            h.val('');
                        } else if((mm==04||mm==06||mm==09||mm==11)&&dd==31) {
                            if(mm!=11) mm = mm.slice(1);
                            p.text(mm+'월에는 31일이 없습니다.' + msg);
                            h.val('');
                        } else if(mm==02) {
                            var isLeap = (yy%4==0&&(yy%100!=0||yy%400==0));
                            if(dd==30||dd==31) {
                                p.text('2월에는 ' + dd + '일이 없습니다.' + msg);
                                h.val('');
                            } else if(dd==29&&!isLeap) {
                                p.text(yy+'년 2월에는 29일이 없습니다.' + msg);
                                h.val('');
                            } else p.text(scs);
                        } else p.text(scs);
                    }
                } else p.text(pt);
            }
            hidden.on('focus',function(){
                sNumber.focus();
            });
        });
        </script>
    <!--@end-->

     

    1 : 참고사항입니다만, 일단은 주민등록번호 확장변수의 제목을 s_number으로 해서 작성한 코드입니다.
    
    2~4 : 별도의 인풋 박스를 만들텐데, XE가 유효성 검사하고 에러 있을 때 포커스가 돌아오는 곳이므로, '절대' 히든으로 하지 않고 보이지 않게만 만들어줍니다.
    
    5 : 여기에 유저들이 입력을 하게 되는데, 제이쿼리가 쉽게 식별할 수 있도록 id 속성을 넣어줍니다.
    
    6 : p태그는 확장변수 설명을 해주는 영역이지만, 여기선 실시간으로 오류 메시지를 보여주는 구실을 하게 될 겁니다.
    
    7 : 이게 바로 유저들에게 감출 히든 인풋 박스입니다. 
    
    15 : 사용자가 숫자를 입력하면 그 값이 히든 박스로 전달되게 되어 있습니다.
    
    16 : 유효성을 검사할 checkSNumber 함수인데(22행부터 자세히 나와 있습니다), 게시글 수정 화면이 로드함과 동시에 기존 입력값의 유효성을 검사합니다.
    
    17~21 : 입력 필드에 값이 입력되거나 필드에 포커스가 가거나 포커스가 블러되었을 때 작동할 이벤트입니다.
    
    18 : 혹시라도(!) 6자리를 넘게 되면 그 이하의 숫자는 자동으로 잘라내버립니다. 물론 인풋 태그의 맥스렝스 값 때문에 초과 입력될 가능성은 거의 없습니다만, 간혹 붙여넣기를 한다든가 하는 경우 초과 입력될 여지가 있기 때문에 작성해본 구문입니다.
    
    19 : 인풋 박스에 숫자만 입력하도록 합니다. 그외의 문자는 모두 입력되지 않습니다.
    
    20 : 입력값의 유효성을 실시간으로 검사합니다. 초기화되었을 땐 관리자가 설정했던 확장변수 설명문으로, 그외엔 유효성에 따라 적절한 메시지가 나오게 될 겁니다.
    
    22 : 이제부터 유효성 검사 함수입니다.
    
    23~28 ; 자주 쓰일 변수를 미리 정의해줍니다.
    
    29 : (혹시 모르니) 입력된 값을 히든 인풋으로 재차 전달해봅니다.
    
    30 : 입력 값이 있을 경우 유효성 검사가 시작됩니다. 입력 값이 없으면(또는 초기화되면), 56행처럼 관리자가 설정했던 확장변수 설명문이 p태그에 출력됩니다.
    
    31~33 : 입력값이 6자리가 안 되면 32행의 문장을 출력합니다. 그리고 히든 인풋에는 어떤 값도 입력되지 않습니다.
    
    34~55 : 이제부터 입력값의 본격적인 유효성 검사가 실시됩니다. 윤달까지 고려해서 에러 메시지가 출력되게 돼 있는 걸 볼 수 있습니다. 유효성 검사를 통과하게 되면, 52행이나 53행에서처럼 석세스 메시지가 뜨게 됩니다.
    
    33, 37, 40, 44, 49, 52 : 여기에 있는 h.val('');은 에러가 있을 경우 히든 인풋의 입력값을 초기화하라는 명령입니다. 이 부분은 바로 이어질 58~60행과 연결해서 설명하겠습니다.
    
    58~60 : 유효하지 않은 값을 입력하고 전체 쓰기 폼을 등록하게 되면 히든 인풋의 입력값이 없으므로 '주민등록번호 값은 필수입니다' 같은 메시지가 얼러트 창으로 뜨게 될 겁니다. 얼러트를 확인하고 나면 커서가 히든 인풋으로 돌아오게 됩니다. 하지만 여기선 히든 인풋은 감춰놨기 때문에 유저로선 위치를 잃어버릴 수도 있죠. 따라서 57~59행처럼 히든 인풋으로 포커스가 왔을 경우 주민등록번호 입력 박스로 커서가 바로 나타나도록 이벤트를 걸어줍니다.

     

    어쨌든 procFilter 때문에 애먹다가 꼼수로 빠지게 됐습니다 흐규흐규

    (나, 이래도 되는 거니?)