회원가입 입력폼 실시간 유효성검사

회원가입 입력폼 실시간 유효성검사

QA

회원가입 입력폼 실시간 유효성검사

본문


$('#reg_mb_id').on('keyup', function(){
    var msg = reg_mb_id_check();
    if (msg)
        $('#msg_mb_id').removeClass('correct').text(msg);
    else
        $('#msg_mb_id').addClass('correct').text('사용 가능한 아이디 입니다.');
});
$('#reg_mb_password_re').on('keyup', function(){
    var pwd = $('#reg_mb_password').val();
    if( $(this).val().length > 0 && $(this).val() != pwd )
        $('#msg_mb_password').removeClass('correct').text('비밀번호가 일치하지 않습니다.');
    else
        $('#msg_mb_password').addClass('correct').text('비밀번호가 일치합니다.');
});
$('#reg_mb_nick').on('keyup', function(){
    var msg = reg_mb_nick_check();
    if (msg)
        $('#msg_mb_nick').removeClass('correct').text(msg);
    else
        $('#msg_mb_nick').addClass('correct').text('사용 가능한 닉네임 입니다.');
});
$('#reg_mb_email').on('keyup', function(){
    var msg = reg_mb_email_check();
    if (msg)
        $('#msg_mb_email').removeClass('correct').text(msg);
    else
        $('#msg_mb_email').addClass('correct').text('사용 가능한 이메일 입니다.');
});
$('#reg_mb_hp').on('keyup', function(){
    var msg = reg_mb_hp_check();
    if( msg )
        $('#msg_mb_hp').removeClass('correct').text(msg);
    else
        $('#msg_mb_hp').addClass('correct').text('');
});

 

각 유효성검사가 필요한 input 에 실시간으로 입력한 값을 받아 유효성검사를 적용했는데요.

 

유효성검사를 걸어두지않은 필드는 즉각즉각 반응을 잘 하는데, 실시간 유효성 검사를 적용한 input 에서만 렉걸린듯한 버벅이는 현상이 생기는데요;;

 

input 에 keyup 이벤트가 실행될때마다 reg_mb_필드명_check 함수가 실행돼서 그런지 버벅이고 있습니다ㅠ

 

버벅이지않고 입력한 값도 즉각즉각 입력되고 실시간으로 유효성검사를 할 방법이 있을까요...??

이 질문에 댓글 쓰기 :

답변 2

제시된 코드만으로 간단하게 재구성했을때

버벅이는 현상은 없는것 같습니다.


<style>
span.correct { color: blue; }
span:not(.correct) { color: red; }
</style>
<ul>
    <li>reg_mb_id: <input type="text" id="reg_mb_id"></li>
    <li><span id="msg_mb_id"></span></li>
    <li>reg_mb_password: <input type="text" id="reg_mb_password"></li>
    <li>reg_mb_password_re: <input type="text" id="reg_mb_password_re"></li>
    <li><span id="msg_mb_password"></span></li>
    <li>reg_mb_nick: <input type="text" id="reg_mb_nick"></li>
    <li><span id="msg_mb_nick"></span></li>
    <li>reg_mb_email: <input type="text" id="reg_mb_email"></li>
    <li><span id="msg_mb_email"></span></li>
    <li>reg_mb_hp: <input type="text" id="reg_mb_hp"></li>
    <li><span id="msg_mb_hp"></span></li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function reg_mb_id_check() {
    //
}
function reg_mb_nick_check() {
    //
}
function reg_mb_email_check() {
    //
}
function reg_mb_hp_check() {
    //
}
$('#reg_mb_id').on('keyup', function(){
    var msg = reg_mb_id_check();
    if (msg)
        $('#msg_mb_id').removeClass('correct').text(msg);
    else
        $('#msg_mb_id').addClass('correct').text('사용 가능한 아이디 입니다.');
});
$('#reg_mb_password_re').on('keyup', function(){
    var pwd = $('#reg_mb_password').val();
    if( $(this).val().length > 0 && $(this).val() != pwd )
        $('#msg_mb_password').removeClass('correct').text('비밀번호가 일치하지 않습니다.');
    else
        $('#msg_mb_password').addClass('correct').text('비밀번호가 일치합니다.');
});
$('#reg_mb_nick').on('keyup', function(){
    var msg = reg_mb_nick_check();
    if (msg)
        $('#msg_mb_nick').removeClass('correct').text(msg);
    else
        $('#msg_mb_nick').addClass('correct').text('사용 가능한 닉네임 입니다.');
});
$('#reg_mb_email').on('keyup', function(){
    var msg = reg_mb_email_check();
    if (msg)
        $('#msg_mb_email').removeClass('correct').text(msg);
    else
        $('#msg_mb_email').addClass('correct').text('사용 가능한 이메일 입니다.');
});
$('#reg_mb_hp').on('keyup', function(){
    var msg = reg_mb_hp_check();
    if( msg )
        $('#msg_mb_hp').removeClass('correct').text(msg);
    else
        $('#msg_mb_hp').addClass('correct').text('');
});
</script>

reg_mb_... 함수들이 ajax 로 서버 호출을 하는것 같은데
연산 내용이 많거나 지연시간이 오래걸리는 경우
코드 개선이나 환경 튜닝이 필요할수도 있지만

이벤트 핸들러를 바꿔보는것도 방법일수 있습니다.
keyup > blur

오.. 안그래도 keyup 대신 blur 로 변경하고 왔는데 답변주셨네요;;

한 글자 한 글자 실시간 대응까진 아니지만 그래도 blur 로 쓰는게 버벅이는 증상은 없고, 유효성 검사는 잘 되니.... blur 로 사용해야겠습니다

감사합니다!

입력체크할때마다 계속 체크 페이지를 불러와서 처리를 해야 하는 부분이라 서버의 상황에 따라 버벅거릴수도 있는 부분입니다.

빠른 답변 감사드립니다.

그럼 기존에 내재되어있는 reg_mb_필드_check 함수를 불러오지 말고, 직접 구현하는 수밖에 없겠네요;;

유효성검사하는 부분을 ajax 로 돌리려고 했는데

이제보니 reg_mb_필드_check 함수도 결국은 ajax 로 페이지를 불러와서 검사를 하고 있네요;; 흠...

답변을 작성하시기 전에 로그인 해주세요.
전체 674
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT