2 양식 입력을 비교하는 방법

Question

두 개의 양식 입력을 비교하고 같은 암호가 맞는지 다시 확인하려고합니다. 암호를 다른 PHP로 보내서 유효성을 검사합니다. (잘 작동) 결과는

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#password_feedback').load('password-check.php').show(); 

    $('#password_input').keyup(function() { 

     $.post('password-check.php', { 
      password: form.password.value 
     }, 
     function(result) { 
      $('#password_feedback').html(result).show(); 
     }); 

    }); 
    }); 
</script> 

나는 행운과 비교하기 위해 PHP에 암호를 다시 입력 = 비밀번호를 전송했습니다. 나는 모든의 keyup으로 두 가지를 비교할 수 있습니다.

Answer 1

을 어떻게을 추가하는 방법에 대한 클래스를 각 입력에 연결 한 다음 :

if($(".password").val() == $(".re-enter-password").val()){ 
    alert("it matches") 
} else { 
    alert("no match yet"); 
} 

Answer 2

PHP 스크립트에서 무엇을 확인 하시겠습니까? 특히 PHP 사용을 정당화하는 것은 무엇입니까?

JS 만 사용하면 AJAX 부분이 필요하지 않습니다.

HTML :

<input type="password" id="password"> 
<input type="password" id="password_cf">  
<div class="result"></div> 

JS (jQuery를)

$('#password_cf').on('keyup', function(){  

    if($('#password_cf').val()== $('#password').val()) 
     $('.result').html('They match'); 
    else 
     $('.result').html('They do not match'); 
}); 

바이올린 : http://jsfiddle.net/2sapjxnu/

당신이 초점가 손실되면만을 확인하려는 경우가 blur 이벤트를 사용할 수 있습니다 그 분야. 모든 키를 확인하는 것보다 반응이 적습니다.하지만 성능이 더 좋습니다.

<input type="password" name="pw1" /> 
<input type="password" name="pw2" /> 

당신은 다음과 같은 코드를 사용하여 서버에 muliple 왕복없이 그것을 클라이언트 측을 확인할 수 있습니다 - -이 마크 업을 감안할 때

-

Answer 3

Quick and dirty

$('[name="pw2"]').blur(function() { 
    var pw1 = $('[name="pw1"]').val(); 
    var pw2 = $('[name="pw2"]').val(); 
    if(pw2 != pw1) { 
     alert('passwords do not match'); 
    } 
}); 

Answer 4

불필요 jQuery를, 함수를 추가하십시오 :

function checkPass(input) { 
    if (input.value != document.getElementById('re-enter-password').value) { 
     input.setCustomValidity('Passwords should match.'); 
    } else { 
     input.setCustomValidity(''); 
    } 
} 

재 입력 - 비밀번호이 추가 :

function checkPass() { 
    var input = document.getElementById('password'); 

    if (input.value != document.getElementById('re-enter-password').value) { 
     input.setCustomValidity('Passwords should match.'); 
    } else { 
     input.setCustomValidity(''); 
    } 
} 

Answer 5

은 2 개 형태의 입력 필드를 일치 : oninput="checkPass(this)"

또는는 당신은 비교를 할 부분이 함수를 호출 어설 션 응답을 얻기 위해 자바 스크립트를 서버에 보내서 나쁜 사용자 경험을 렌더링 할 수 있습니다. 왜냐하면 사용자가 각 keyPress에서이 작업을 수행하면 불필요한 인터넷 트래픽이 발생하기 때문입니다 - 사용자가 대기하는 동안.

그래서이 두 필드를 JavaScript로 직접 비교하지 않는 이유는 무엇입니까? 유효성 검사를 위해 서버에서 특정 정규 표현식을 사용하는 경우 서버가 해당 정규식 "패턴"을 HTML 필드에 넣을 수 있습니다 (JavaScrpt는 필요하지 않음). 그런 다음 onkeyup 이벤트를 통해 다음과 같이 간단하게 할 수 있습니다.

form.field2.onkeyup = function() 
{ 
    if (form.field1.value !== form.field2.value) 
    { 
     /* some code to highlight the 2 fields, 
     or show some message, or speech bubble */ 
     return; 
    } 
} 

form.field1.onkeyup = form.field2.onkeyup;