회원가입 입력폼 실시간 유효성검사
본문
$('#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_필드_check 함수는 직접 작성한 함수는 아니고 영카트 js/jquery.register_form.js 에 내재되어있는 함수를 그대로 불러와서 사용중입니다...
reg_mb_... 함수들이 ajax 로 서버 호출을 하는것 같은데
연산 내용이 많거나 지연시간이 오래걸리는 경우
코드 개선이나 환경 튜닝이 필요할수도 있지만
이벤트 핸들러를 바꿔보는것도 방법일수 있습니다.
keyup > blur
오.. 안그래도 keyup 대신 blur 로 변경하고 왔는데 답변주셨네요;;
한 글자 한 글자 실시간 대응까진 아니지만 그래도 blur 로 쓰는게 버벅이는 증상은 없고, 유효성 검사는 잘 되니.... blur 로 사용해야겠습니다
감사합니다!
입력체크할때마다 계속 체크 페이지를 불러와서 처리를 해야 하는 부분이라 서버의 상황에 따라 버벅거릴수도 있는 부분입니다.
빠른 답변 감사드립니다.
그럼 기존에 내재되어있는 reg_mb_필드_check 함수를 불러오지 말고, 직접 구현하는 수밖에 없겠네요;;
유효성검사하는 부분을 ajax 로 돌리려고 했는데
이제보니 reg_mb_필드_check 함수도 결국은 ajax 로 페이지를 불러와서 검사를 하고 있네요;; 흠...
