Javascript 键入时检查密码匹配_Javascript_Jquery

Javascript 键入时检查密码匹配

javascript jquery

Javascript 键入时检查密码匹配,javascript,jquery,Javascript,Jquery,我有一个带有“密码”和“确认密码”输入字段的注册表。我想在用户键入密码时检查“确认密码”是否与“密码”匹配，并给出相应的消息。所以我试着这样做：这是HTML： <div class="td"> <input type="password" id="txtNewPassword" /> </div> <div class="td"> <input type="password" id="txtConfirmPassword"

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

这是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>

只有当用户离开字段时，才在键入时验证

我试着用onKeyUp代替onChange，但也没用

那么，如何做到这一点呢

谢谢大家!

onChange事件中的语法可能无效，我避免这样使用（在html中），因为我认为这样做很混乱，而且在最好的时候保持JavaScript整洁已经足够困难了

我宁愿在javascript中的DocumentReady事件上注册该事件。如果您希望在用户键入以下内容时进行验证，则肯定也要使用keyup事件：

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

就我个人而言，我更愿意在任一密码字段更改时进行检查，这样，如果他们重新键入原始密码，那么您仍然会得到相同的验证检查：

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

这种情况下的问题是，onchange事件在输入失去焦点之前不会触发，因此您可能需要监听每次击键时触发的keyup事件

另外，我更喜欢不使用内联javascript，而是使用jQuery捕捉事件

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

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>

这是一个有效的JSFIDLE

注意事项：

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

这么说来，验证是一个已解决的问题，有一些框架实现了这一功能

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

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

HTML

我认为它的逻辑错误。。。每个KeyUp事件上的KeyUp bind消息我认为最好在focusout事件上调用函数无效的语法事实就是问题所在。正如下面的答案所述，您可以在jquery中处理所有这些，因为您已经在使用它了，或者只需将事件的名称更改为onchange（onchange仅在字段失去焦点时触发，因此只要转到其他字段或单击外部，您就应该得到所需的内容）或者使用onkeyup作为事件名称，而不是onChange和onkeyup。@SanjayGoswami-脚本不会多次绑定。w3c描述的这些内在事件采用一个脚本值，并在该元素发生事件时执行。我编辑了您的问题，以修复第一个“不起作用”（您可以使用的最无用的描述），但我不知道第二个“不起作用”。请自行修复。谢谢大家的见解！我现在将它改为jquery处理，非常好！我是一个初学者，阅读和学习，所以非常感谢您的所有建议！再次感谢你+1加载jQuery并避免使用其事件处理功能没有任何意义。@非常感谢！是的，它确实解决了这个问题！您必须像这样检查确认传递值..if（$（this）.val（）！=$（'#txtNewPassword'）.val（）.substr（0，$（this）.val（）.length））…因为如果用户键入正确的密码，那么直到最后它也不会显示match@sandeep：您不必使用

$（this）

-如果您看到我的JSFIDLE示例，它可以正常工作。另外，在调用独立函数时，不建议使用

此

，因为如果其他函数调用该函数，它将无法正常工作注意：fiddle示例有一个错误：如果键入密码，然后确认密码，然后更改原始密码，它将不会检查匹配。我们应该对这两个控件进行检查调用。+1从20世纪90年代末开始，加载jQuery并继续使用内联JavaScript是没有意义的：）@Salman这是一个有趣的方法，我不熟悉它。我在哪里可以读到更多关于它的信息？谢谢大家!@伊加尔：你是在说那个吗？@Salman是的，就是关于他们。以前从没见过！谢谢你的链接！嗯，是的，成功了。我想知道为什么我第一次试的时候它不起作用。。。谢谢你！非常感谢。我会检查这个验证，看起来很有趣，很有用！在原始示例中，它是type=“password”。您的示例使用类型text.Works为我工作-3年前我编写它时使用，现在仍然使用：）

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

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

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

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

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

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');
    }