후원회원 가입 신청을 위해 주민등록번호 앞의 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
    윤삼 2017.03.04 11:56:24

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

     

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

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

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

     

    그리고 이용자의 입력값이 어떤 점에서 잘못됐는지를 알려주기 위해, 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 때문에 애먹다가 꼼수로 빠지게 됐습니다 흐규흐규

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


서버에 요청 중입니다. 잠시만 기다려 주십시오...