Question

我有一个带有“密码”和“确认密码”输入字段的注册表。我想检查“确认密码”是否与用户输入密码时的“密码”匹配并给出相应的消息。所以我试着这样做：

这是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 - 也没用。

那怎么办呢？

谢谢！

Answer 1

你的onChange事件中的语法可能无效，我避免像这样使用（在html中），因为我觉得它很乱，并且很难在最好的时候保持JavaScript的整洁。

我宁愿在javascript中的文档就绪事件上注册该事件。如果您想要在用户输入时进行验证，您也肯定也想使用keyup事件：

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

Here is a working example

我个人更喜欢在密码字段更改时进行检查，如果他们重新输入原始密码，那么您仍然可以获得相同的验证检查：

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

Here is a working example

Answer 2

这是一个有效的jsfiddle

http://jsfiddle.net/dbwMY/

注意事项：

验证document.ready函数中绑定的事件处理程序 - 否则在加载JS时输入将不存在
使用keyup

在说，验证是一个已解决的问题，有一些实现此功能的框架。

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

我建议您使用其中一个，而不是为您编写的每个应用重新实现验证。

Answer 3

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

Demo here

Answer 4

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


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



});

Answer 5

在这种情况下的问题是onchange-event在输入失去焦点之前不会触发，因此您可能希望侦听keyup-event，这会在每次击键时触发。

另外，我不想使用inline-javascript，而是使用jQuery来捕获事件。

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

Answer 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>

Answer 7

如果使用引导程序，则根据结果，文本将为绿色或红色

HTML

<div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">New Password</span>
<input type="password" id="txtNewPassword" class="form-control">     
        </label>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">Confirm Password
        </span>
        <input class="form-control" type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();">   
            </label>
        </div>
        <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>

CSS

.text-success {
    color: #28a745;
}
.text-danger {
    color: #dc3545;
}

JS

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

        if (password != confirmPassword)
            $("#divCheckPasswordMatch").html("Passwords do not match!").addClass('text-danger').removeClass('text-success');

        else
            $("#divCheckPasswordMatch").html("Passwords match.").addClass('text-success').removeClass('text-danger');
    }

键入时检查密码匹配

7 个答案: