Проверка совпадения паролей при наборе текста

У меня есть форма регистрации с полями ввода "пароль" и "подтвердить пароль". Я хочу проверить, соответствует ли "подтверждающий пароль" "пароль", когда пользователь вводит его и дает соответствующее сообщение. Поэтому я попытался сделать это:

Это HTML:

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

И это функция checkPasswordMatch():

function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}

Это не подтвердилось при наборе текста, только когда пользователь покидает поле.

Я попытался использовать onKeyUp вместо onChange - тоже не работал.

Итак, как это можно сделать?

Спасибо!

Ответы

Ответ 1

Вероятно, недействительный синтаксис в вашем событии onChange, я избегаю использовать подобное (внутри html), поскольку я думаю, что это грязно, и это достаточно сложно, чтобы поддерживать порядок в порядке вещей в порядке вещей.

Я предпочел бы зарегистрировать событие на событии, готовом к документу, в javascript. Вы также обязательно захотите использовать событие keyup, если вы хотите, чтобы проверка была введена пользователем:

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

Вот рабочий пример

Лично я предпочел бы делать проверку, когда изменяется поле пароля, таким образом, если они повторно вводят исходный пароль, тогда вы все равно получите ту же проверку проверки:

$(document).ready(function () {
   $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

Вот рабочий пример

Ответ 2

Здесь работает jsfiddle

http://jsfiddle.net/dbwMY/

Примечания:

  • проверять обработчик событий в функции document.ready - иначе входы не будут существовать при загрузке JS
  • с помощью клавиатуры

Говоря о том, что валидация является решаемой проблемой, существуют фреймворки, которые реализуют эту функциональность.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Я бы предложил использовать один из них, а не переопределять Validation для каждого приложения, которое вы пишете.

Ответ 3

$(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val()
            ? "Passwords match."
            : "Passwords do not match!"
        );
    });
});​

Демо здесь

Ответ 4

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


if($(this).val() != $('#txtNewPassword').val().substr(0,$(this).val().length))
{
 alert('confirm password not match');
}



});

Ответ 5

Проблема в этом случае заключается в том, что onchange-event не срабатывает до тех пор, пока вход не потеряет фокус, поэтому вы, вероятно, захотите прослушивать событие keyup-event, которое запускается при каждом нажатии клавиши.

Кроме того, я бы предпочел не использовать inline-javascript, а скорее поймать событие, используя jQuery.

$("#txtConfirmPassword").keyup(checkPasswordMatch);

Ответ 6

Событие onkeyup "работает", как вы планируете:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}
//--></script>
</head>
<body>

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

</body>
</html>