Copy
$('#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개 / 댓글 4개
채택된 답변
+20 포인트
제시된 코드만으로 간단하게 재구성했을때
버벅이는 현상은 없는것 같습니다.
Copy
<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>
답변에 대한 댓글 3개
입력체크할때마다 계속 체크 페이지를 불러와서 처리를 해야 하는 부분이라 서버의 상황에 따라 버벅거릴수도 있는 부분입니다.
답변을 작성하려면 로그인이 필요합니다.
현재 reg_mb_필드_check 함수는 직접 작성한 함수는 아니고 영카트 js/jquery.register_form.js 에 내재되어있는 함수를 그대로 불러와서 사용중입니다...