패스워드, 확인패스워드가 맞는지 체크

패스워드, 확인패스워드가 맞는지 체크



1.  jQuery 사용



$('#password, #confirm_password').on('keyup', function () {

  if ($('#password').val() == $('#confirm_password').val()) {

    $('#message').html('Matching').css('color', 'green');

  } else 

    $('#message').html('Not Matching').css('color', 'red');

});



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>password :

  <input name="password" id="password" type="password" />

</label>

<br>

<label>confirm password:

  <input type="password" name="confirm_password" id="confirm_password" />

  <span id='message'></span>

</label>







2. jQuery 사용없이.

var check = function() {

  if (document.getElementById('password').value ==

    document.getElementById('confirm_password').value) {

    document.getElementById('message').style.color = 'green';

    document.getElementById('message').innerHTML = 'matching';

  } else {

    document.getElementById('message').style.color = 'red';

    document.getElementById('message').innerHTML = 'not matching';

  }

}



<label>password :

  <input name="password" id="password" type="password" onkeyup='check();' />

</label>

<br>

<label>confirm password:

  <input type="password" name="confirm_password" id="confirm_password"  onkeyup='check();' /> 

  <span id='message'></span>

</label>