<div>
  <h3>Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:</h3>
  <input type="text" name="" placeholder="Enter your password">
  <span class="message success">Valid Password!</span>
  <span class="message error">Invalid Password!</span>
</div>

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    display: flex;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

div {
    width: 50%;
}

input {
    font-size: 30px;
    width: 100%;
    padding: 15px;
    text-align: center;
    border: 5px solid rgba(0, 0, 0, .3);
}

.message {
    font: 20px Helvetica, Arial, Sans-serif;
    display: none;
    width: 100%;
    padding: 20px;
    color: #fff;
}

.error {
    background: red;
}

.success {
    background: green;
}

$(function(){
  var regExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  $('[type="text"]').on('keyup', function() {
    $('.message').hide();
    regExp.test( $(this).val() ) ? $('.message.success').show() : $('.message.error').show();
  });

});